/* CureBot — Medical Theme (Final Patched with fade animations) */

/* ====== Variables ====== */
:root{
  --blue: #1565c0;
  --blue-2: #1e88e5;
  --card-bg: rgba(255,255,255,0.32);
  --glass-border: rgba(255,255,255,0.22);
  --bot-bubble: rgba(233,244,255,0.92);
  --user-bubble: rgba(30,136,229,0.95);
  --radius: 28px;
  --card-shadow: 0 24px 60px rgba(6,30,50,0.12);
  --avatar-size: 44px;
  --ring-size: 56px;
  --muted: #6b6b6b;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Poppins",sans-serif;-webkit-font-smoothing:antialiased;}
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)),
    url("assets/bg.jpg") no-repeat center/cover;
  color: #07324a;
  overflow: hidden;
}

/* ====== App Title ====== */
.app-title {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  color:var(--blue);
  font-size:20px;
  pointer-events:none;
}

/* ====== Background Shapes ====== */
.bg-shape { position: fixed; border-radius: 50%; filter: blur(110px); opacity: 0.24; z-index:-4; }
.shape1{ width:300px; height:300px; left:-80px; top:-80px; background: #cfeaff; }
.shape2{ width:260px; height:260px; right:-60px; bottom:-60px; background: #dbeeff; }
.shape3{ width:200px; height:200px; left:65%; top:30%; background: #bffaff; }

/* ====== Stars (container) ====== */
#stars{ position:fixed; inset:0; z-index:-5; pointer-events:none; }

/* each star will be absolutely positioned by JS */
.star{ 
  position:absolute; 
  width:3px; height:3px; 
  background:rgba(255,255,255,0.9);
  border-radius:50%; 
  transform-origin:center;
  opacity:0.95;
  will-change: transform, opacity;
}

/* subtle twinkle */
@keyframes twinkle{ 0%{opacity:0.35;} 50%{opacity:1;} 100%{opacity:0.35;} }

/* ====== Floating particles ====== */
#leaf-layer { position: fixed; inset:0; z-index:-3; pointer-events:none; }
.leaf { position:absolute; width:24px; height:24px; border-radius:6px; background:#e8fbff; }

/* ====== Decorative grass ====== */
.body-grass { position:fixed; left:0; right:0; bottom:-6%; height:26vh; z-index:-2; background: rgba(200,245,255,0.06); filter: blur(8px); }

/* ====== Chat Container (ENLARGED & GLASS) ====== */
.chat-container {
  width: 92vmin;
  max-width: 1120px;
  height: 86vmin;
  max-height: 820px;
  background: var(--card-bg);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
  position:relative;
  z-index:10;
}

/* ====== Chat Box ====== */
.chat-box {
  padding:16px;
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  scroll-behavior:smooth; /* smooth scroll */
}

/* scrollbar (subtle) */
.chat-box::-webkit-scrollbar{ width:10px; }
.chat-box::-webkit-scrollbar-thumb{ background: rgba(8,40,80,0.08); border-radius:10px; }

/* ====== Message bubbles (base) ====== */
.user-message, .bot-message {
  max-width: 88%;                /* little wider bubble */
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;          /* PREVENT CUTTING of long text */
  overflow: visible !important;   /* allow bubble to expand fully */
  height: auto !important;        /* no clipping */

  /* fade-in animation */
  opacity: 0;
  transform: translateY(8px);
  animation: fadeIn 0.35s ease-out forwards;
}


/* Fade in animation */
.fade-in {
  animation: fadeInUp 320ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* user bubble */
.user-message {
  align-self:flex-end;
  background: var(--user-bubble);
  color:white;
  border-radius:18px 18px 6px 18px;
}

/* base bot bubble */
.bot-message {
  align-self:flex-start;
  background: var(--bot-bubble);
  color:#07324a;
  border-radius:18px;
  padding-left:16px;
}

/* BOT VARIANTS: system vs normal */
.bot-message.bot-system {
  padding-left: 16px;             /* no avatar space */
}

/* bot message with avatar (real bot replies) */
.bot-message.bot-msg {
  padding-left: calc(var(--avatar-size) + 26px);
  border-radius:18px 18px 18px 6px;
}

/* avatar for bot-msg */
.bot-message.bot-msg::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  background-image: url("assets/logo.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(6,30,50,0.14);
  z-index:6;
}

/* subtle internal white border for avatar */
.bot-message::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
  z-index: 7;
  pointer-events: none;
}

/* ====== Typing loader (ring) ====== */
.typing {
  width: var(--ring-size);
  height: var(--ring-size);
  position: relative;
  margin-left: 10px;
  margin-top: 4px;
}

/* rotating arc */
.typing::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--blue-2);
  border-right-color: var(--blue-2);
  animation: spin 0.9s linear infinite;
}

/* glowing center dot */
.typing::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--blue-2);
  border-radius: 50%;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  box-shadow: 0 0 9px var(--blue-2);
  animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes pulse{ from{transform:scale(1);opacity:0.7;} to{transform:scale(1.4);opacity:1;} }

/* ====== Input area ====== */
.input-area {
  display:flex;
  gap:8px;
  padding:8px;
  border-radius:12px;
  background:white;
  border:1px solid #cfe2ff;
  align-items:center;
}
.input-area input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:12px;
  font-size:15px;
}

#mic-btn, #send-btn,#camera-btn {
  border:none;
  background: var(--blue);
  color:white;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(21,101,192,0.08);
  transition: transform 120ms ease, background 100ms ease;
}
#mic-btn:hover, #send-btn:hover ,#camera-btn:hover {
  transform: translateY(-2px);
  background: var(--blue-2);
}

/* responsive */
@media (max-width:980px){
  .chat-container{ width:96vmin; height:92vmin; padding:14px;}
  :root{ --avatar-size:40px; --ring-size:50px; }
}

.hidden{ display:none !important; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.action-btn {
  border: none;
  background: var(--blue);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
}

.action-btn:hover {
  background: var(--blue-2);
}

.send-btn {
  border: none;
  background: var(--blue);
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

.send-btn:hover {
  background: var(--blue-2);
}

/* End of CSS */