/* ============================================
   EnergyLog.AI — Chatbot Page Styles
   ============================================ */

body.chatbot-page{
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
}

/* Chat area */
.chat-area{flex:1;overflow-y:auto;padding:20px 0}
.chat-inner{max-width:780px;margin:0 auto;padding:0 24px}

/* Welcome screen */
.welcome{text-align:center;padding:60px 20px}
.welcome-icon{
  width:64px;height:64px;border-radius:18px;
  background:var(--vi-bg);display:flex;align-items:center;
  justify-content:center;margin:0 auto 20px;
}
.welcome-icon svg{width:30px;height:30px;stroke:var(--vi)}
.welcome h2{font-size:22px;font-weight:700;margin-bottom:8px}
.welcome p{font-size:14px;color:var(--tx2);max-width:420px;margin:0 auto 24px;line-height:1.6}
.suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sug{
  padding:8px 16px;border:1px solid var(--brd);border-radius:10px;
  font-size:12px;color:var(--tx2);cursor:pointer;
  transition:all .15s;background:var(--card);
}
.sug:hover{border-color:var(--vi);color:var(--vi);background:var(--vi-bg)}

/* Messages */
.msg{margin-bottom:16px;display:flex;gap:12px;animation:fadeIn .3s ease}
.msg-user{flex-direction:row-reverse}
.msg-avatar{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:13px;font-weight:700;
}
.msg-user .msg-avatar{background:var(--ac);color:#fff}
.msg-bot .msg-avatar{background:var(--vi-bg);color:var(--vi)}
.msg-bubble{
  max-width:85%;padding:14px 18px;border-radius:14px;
  font-size:14px;line-height:1.65;
}
.msg-user .msg-bubble{
  background:var(--ac-bg);border-bottom-right-radius:4px;
}
.msg-bot .msg-bubble{
  background:var(--card);border:1px solid var(--brd);
  border-bottom-left-radius:4px;
}
.msg-bot .msg-bubble p{margin-bottom:8px}
.msg-bot .msg-bubble p:last-child{margin-bottom:0}
.msg-sources{
  margin-top:10px;padding-top:8px;
  border-top:1px solid var(--brd);
  font-size:11px;color:var(--tx3);
}
.msg-sources span{color:var(--vi);font-weight:500}

/* Typing indicator */
.typing{display:flex;gap:4px;padding:8px 0}
.typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--tx3);animation:bounce .6s infinite alternate;
}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}

/* Input bar */
.input-bar{
  padding:16px 24px;background:var(--bg2);
  border-top:1px solid var(--brd);flex-shrink:0;
}
.input-inner{max-width:780px;margin:0 auto;display:flex;gap:10px}
.input-inner input{
  flex:1;height:46px;padding:0 18px;
  border:1.5px solid var(--brd);border-radius:12px;
  font-size:14px;font-family:inherit;color:var(--tx);
  background:var(--card);outline:none;transition:all .15s;
}
.input-inner input:focus{
  border-color:var(--vi);
  box-shadow:0 0 0 3px rgba(108,62,214,.06);
}
.input-inner input::placeholder{color:var(--tx3)}
.btn-send{
  width:46px;height:46px;border:none;border-radius:12px;
  background:var(--vi);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.btn-send:hover{background:#5a2dc4;transform:translateY(-1px)}
.btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-send svg{width:18px;height:18px}

@media(max-width:768px){
  .chat-inner{padding:0 12px}
  .input-inner{gap:6px}
}