/* =========================================================
   Olive Widget CSS  (mobile-friendly)
   ========================================================= */

/* Contain sizing so flex children don't overflow */
#olive-panel, #olive-panel * { box-sizing: border-box; }
#olive-launcher, #olive-panel { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Floating button */
#olive-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  border:0; border-radius:999px; width:56px; height:56px;
  box-shadow:0 8px 24px rgba(0,0,0,.16); cursor:pointer;
  background:#111; color:#fff; font-weight:600;
  touch-action: manipulation;
}

/* Panel */
#olive-panel{
  position:fixed; right:20px; bottom:90px; z-index:9999;
  width:360px; max-width:92vw; height:560px; max-height:75vh;
  background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.18);
  display:none; /* JS toggles to flex */
  overflow:hidden;
  flex-direction:column; /* becomes active when display:flex */
  overscroll-behavior: contain; /* don't scroll page behind the chat */
}
@media (prefers-reduced-motion:no-preference){
  #olive-panel{ transition:.2s ease-in-out; }
}

/* Header */
#olive-header{
  padding:12px 16px; border-bottom:1px solid #eee;
  display:flex; align-items:center; gap:10px; background:#fff;
}
#olive-header img{ width:32px; height:32px; border-radius:50%; object-fit:cover }
#olive-title{ font-weight:700 }

/* Body grows; input stays fixed -> no overflow below */
#olive-body{
  flex:1; overflow:auto; padding:16px; background:#fafafa;
  overscroll-behavior: contain;
}

/* Bubbles */
.olive-msg{
  margin:10px 0; max-width:84%;
  padding:10px 12px; border-radius:14px;
  line-height:1.5; font-size:15px;               /* slightly larger for readability */
  word-break: break-word;                         /* long URLs/words don't overflow */
}
.olive-user{
  margin-left:auto; background:#111; color:#fff;
  border-bottom-right-radius:4px;
}
.olive-bot{
  background:#fff; border:1px solid #eee; border-bottom-left-radius:4px;
  color:#111;                                      /* high-contrast bot text */
}
.olive-bot b, .olive-bot strong{ color:#0f172a; }  /* bold stands out */

/* Typing hint */
#olive-typing{ font-size:12px; color:#777; padding:0 16px 8px }

/* Input bar (sticky; button always fully visible) */
#olive-inputbar{
  position:sticky; bottom:0; background:#fff;
  display:flex; align-items:center; gap:10px;
  padding:10px; border-top:1px solid #e5e7eb;
}
#olive-input{
  flex:1 1 auto;
  min-width:0;              /* allow input to shrink so Send never clips */
  min-height:44px;
  padding:10px 12px;
  font-size:16px;
  border:2px solid #e5e7eb;
  border-radius:10px;
  outline:none;
}
#olive-input::placeholder{ color:#9ca3af; }
#olive-input:focus{ border-color:#94a3b8; }
#olive-send{
  flex:0 0 100px;           /* reserve space so it never clips */
  height:44px;
  padding:0 16px;
  font-weight:700;
  border:0;
  border-radius:10px;
  background:#111; color:#fff;
  cursor:pointer;
  align-self:center;
  touch-action: manipulation;
}
#olive-send:focus-visible{ outline:2px solid #94a3b8; outline-offset:2px; }
@media (hover:hover){
  #olive-send:hover{ filter:brightness(0.92); }
}

/* --- Olive teaser (small invite bubble) --- */
#olive-teaser{
  position:fixed; bottom:96px; right:20px;
  display:none; align-items:center; gap:10px;
  background:#fff; color:#222;
  border:1px solid #e6e6e6; border-radius:12px;
  padding:10px 12px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  z-index:10000; max-width:280px; cursor:pointer;
}
#olive-teaser.visible{ display:flex; animation:olive-teaser-in .25s ease-out; }
#olive-teaser img{ width:28px; height:28px; border-radius:50%; object-fit:cover }
#olive-teaser .teaser-text{ line-height:1.25; font-size:14px; }
#olive-teaser .teaser-close{
  margin-left:8px; font-size:16px; line-height:1; color:#666; cursor:pointer;
}
#olive-teaser .teaser-close:hover{ color:#000; }

/* little pointer */
#olive-teaser::after{
  content:""; position:absolute; bottom:-8px; right:24px;
  border:8px solid transparent; border-top-color:#fff;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.06));
}

@keyframes olive-teaser-in{
  from{ transform:translateY(6px); opacity:0 }
  to{ transform:none; opacity:1 }
}

/* Small phones: adjust teaser and panel height/font */
@media (max-width:480px){
  #olive-teaser{ bottom:86px; right:12px; max-width:72vw; }
  #olive-panel{ font-size:15px; max-height:80vh; }
}

/* Very narrow phones: allow Send to shrink slightly */
@media (max-width:360px){
  #olive-send{ flex-basis:88px; }
}