/* Umeed Companion — Chat Widget Styles
   Drop this file in alongside chatbot-widget.js and link both on any page
   where you want the chat bubble to appear. */

#umeed-chat-launcher{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  width:62px; height:62px; border-radius:50%;
  background:#FF6B4A; color:#fff; border:none; cursor:pointer;
  box-shadow:0 10px 26px rgba(255,107,74,0.4);
  font-size:26px; display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
#umeed-chat-launcher:hover{ transform:scale(1.06); }

#umeed-chat-panel{
  position:fixed; bottom:96px; right:24px; z-index:9999;
  width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 140px);
  background:#fff; border-radius:20px;
  box-shadow:0 24px 60px rgba(37,50,75,0.25);
  display:none; flex-direction:column; overflow:hidden;
  font-family:'Nunito Sans', Arial, sans-serif;
}
#umeed-chat-panel.open{ display:flex; }

#umeed-chat-header{
  background:#25324B; color:#fff; padding:16px 18px;
  display:flex; align-items:center; gap:10px;
}
#umeed-chat-header .avatar{
  width:32px; height:32px; border-radius:50%; background:#FF6B4A;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:'Fredoka', Arial, sans-serif;
}
#umeed-chat-header .info strong{ display:block; font-size:14px; }
#umeed-chat-header .info span{ font-size:11px; color:#9BA3B8; }
#umeed-chat-header .close-btn{
  margin-left:auto; background:none; border:none; color:#C4CBDB;
  font-size:20px; cursor:pointer; line-height:1;
}

#umeed-chat-messages{
  flex:1; overflow-y:auto; padding:16px; background:#FFF8F0;
  display:flex; flex-direction:column; gap:10px;
}
.umeed-msg{
  max-width:82%; padding:10px 14px; border-radius:14px; font-size:13.5px;
  line-height:1.45; white-space:pre-wrap; word-wrap:break-word;
}
.umeed-msg.bot{ background:#FFEFE0; color:#25324B; align-self:flex-start; border-bottom-left-radius:4px; }
.umeed-msg.user{ background:#0EA5A0; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.umeed-msg.typing{ background:#FFEFE0; color:#7A8299; align-self:flex-start; font-style:italic; }

#umeed-chat-inputrow{
  display:flex; gap:8px; padding:12px; border-top:1px solid #eee; background:#fff;
}
#umeed-chat-input{
  flex:1; border:2px solid #ECE4DA; border-radius:12px; padding:10px 12px;
  font-size:13.5px; font-family:inherit; resize:none;
}
#umeed-chat-input:focus{ outline:none; border-color:#0EA5A0; }
#umeed-chat-send{
  background:#FF6B4A; color:#fff; border:none; border-radius:12px;
  padding:0 16px; font-weight:800; cursor:pointer; font-size:13px;
}
#umeed-chat-send:disabled{ opacity:0.5; cursor:not-allowed; }

#umeed-chat-disclaimer{
  font-size:10.5px; color:#9BA3B8; text-align:center; padding:6px 12px 12px;
  background:#fff;
}

/* On phones/small tablets, the chat takes over the whole screen instead
   of floating as a small box — much easier to read and type in. */
@media(max-width:640px){
  #umeed-chat-panel{
    top:0; left:0; right:0; bottom:0;
    width:100%; max-width:100%;
    height:100vh; max-height:100vh;
    height:100dvh; max-height:100dvh; /* dvh accounts for mobile browser chrome; falls back to vh above */
    border-radius:0;
  }
  #umeed-chat-header{ padding-top:max(16px, env(safe-area-inset-top)); }
  #umeed-chat-inputrow{ padding-bottom:max(12px, env(safe-area-inset-bottom)); }
  /* 16px+ keeps iOS Safari from auto-zooming the page when the input is focused */
  #umeed-chat-input{ font-size:16px; }
  #umeed-chat-launcher{ bottom:max(20px, env(safe-area-inset-bottom)); right:20px; }
}