@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --accent-1:#7c3aed;      /* matches the "New" badge / Book a Call button on the site */
  --accent-2:#5b21b6;
  --accent-glow: rgba(124,58,237,.35);
  --bg-window:#0b0a10;      /* matches the near-black hero background */
  --bg-elevated:#18161f;
  --bg-sunken:#100e15;
  --border-soft: rgba(255,255,255,.08);
  --text-primary:#f4f4f6;
  --text-muted:#9a99a3;
  --ease: cubic-bezier(.22,1,.36,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);

  /* Bot icon, two color variants so it's never rendered on a
     same-colored background (that was the invisible-avatar bug). */
  --bot-icon-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='3.6' r='1.4' fill='%237c3aed'/%3E%3Cline x1='12' y1='5' x2='12' y2='7.5' stroke='%237c3aed' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='4' y='7.5' width='16' height='12.5' rx='5' fill='%237c3aed'/%3E%3Ccircle cx='9.2' cy='13.8' r='1.7' fill='white'/%3E%3Ccircle cx='14.8' cy='13.8' r='1.7' fill='white'/%3E%3Cpath d='M9 18h6' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --bot-icon-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='3.6' r='1.4' fill='white'/%3E%3Cline x1='12' y1='5' x2='12' y2='7.5' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='4' y='7.5' width='16' height='12.5' rx='5' fill='white'/%3E%3Ccircle cx='9.2' cy='13.8' r='1.7' fill='%237c3aed'/%3E%3Ccircle cx='14.8' cy='13.8' r='1.7' fill='%237c3aed'/%3E%3Cpath d='M9 18h6' stroke='%237c3aed' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============================================================
   Defensive sizing: your host page appears to have a rule
   (a reset, a flex/grid stretch, or a `div{height:100%}`-type
   rule) that was overriding these two elements, which is why
   the panel stretched full-viewport-height and the header text
   wrapped. Locking position/size here with !important protects
   the widget regardless of what else is loaded on the page.
   ============================================================ */

.chat-toggle{
  position:fixed !important;
  top:auto !important;
  left:auto !important;
  bottom:28px !important;
  right:28px !important;
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 30% 25%, #ffffff, #f2f1fb 60%, #eae7fb);
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  color:transparent;
  font-size:0;
  box-shadow:0 8px 26px var(--accent-glow), 0 2px 8px rgba(0,0,0,.25),
             inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .35s var(--bounce), box-shadow .35s var(--ease);
  z-index:9999;
  animation:float 3.5s ease-in-out infinite, pulse-ring 2.8s ease-out infinite;
}

.chat-toggle::before{
  content:'';
  width:26px;
  height:26px;
  background-image:var(--bot-icon-purple);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  display:block;
  transition:transform .3s var(--bounce);
}

.chat-toggle:hover::before{ transform:scale(1.1) rotate(-6deg); }

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

@keyframes pulse-ring{
  0%{ box-shadow:0 8px 26px var(--accent-glow), 0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 0 var(--accent-glow); }
  70%{ box-shadow:0 8px 26px var(--accent-glow), 0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 14px rgba(124,58,237,0); }
  100%{ box-shadow:0 8px 26px var(--accent-glow), 0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 0 rgba(124,58,237,0); }
}

.chat-toggle:hover{
  animation-play-state:paused;
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 14px 34px var(--accent-glow), 0 2px 10px rgba(0,0,0,.3),
             inset 0 0 0 1px rgba(255,255,255,.7);
}

.chat-toggle:active{ transform:translateY(-1px) scale(.95); }
.chat-toggle:focus-visible{ outline:2px solid var(--accent-1); outline-offset:3px; }

/* ---------- Chat window ---------- */
.chat-window{
  position:fixed !important;
  top:auto !important;
  left:auto !important;
  right:24px !important;
  bottom:98px !important;
  width:380px !important;
  max-width:92vw;
  height:600px !important;
  max-height:78vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;

  background:var(--bg-window);
  backdrop-filter:blur(24px);
  border:1px solid var(--border-soft);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02);

  z-index:9999;
  transform-origin:bottom right;
  opacity:0;
  transform:translateY(20px) scale(.94) rotate(1deg);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}

.chat-window.active{
  opacity:1;
  transform:translateY(0) scale(1) rotate(0deg);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .35s var(--bounce), transform .35s var(--bounce);
}

/* ---------- Header: single row, never wraps ---------- */
.chat-header{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px;
  padding:14px 14px 14px 16px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border-soft);
}

.chat-header > div{
  display:flex;
  flex-direction:column;
  min-width:0;      /* required for text-overflow to work inside flex */
  flex:1;
}

.chat-header h3{
  margin:0;
  font-family:'Space Grotesk', sans-serif;
  font-size:14.5px;
  font-weight:600;
  color:var(--text-primary);
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
}

.chat-header span{
  font-size:11px;
  color:var(--text-muted);
  position:relative;
  padding-left:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}

.chat-header span::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3ddc84;
  animation:status-pulse 2s infinite;
}

@keyframes status-pulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,132,.6); }
  70%{ box-shadow:0 0 0 6px rgba(61,220,132,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); }
}

.chat-header button{
  flex-shrink:0;
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:18px;
  cursor:pointer;
  border-radius:8px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color .2s, background .2s, transform .3s var(--bounce);
}

.chat-header button:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
  transform:rotate(90deg);
}

.chat-header button:focus-visible{ outline:2px solid var(--accent-1); outline-offset:1px; }

/* ---------- Messages ---------- */
.chat-messages{
  flex:1;
  padding:18px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  scroll-behavior:smooth;
  font-family:'Inter', sans-serif;
}

.bot-message{
  align-self:flex-start;
  background:var(--bg-elevated);
  color:var(--text-primary);
  padding:12px 16px;
  border-radius:16px 16px 16px 5px;
  line-height:1.6;
  max-width:85%;
  font-size:13.5px;
  animation:rise-left .35s var(--bounce) both;
}

.user-message{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--accent-1),#5b5df7);
  color:white;
  padding:12px 16px;
  border-radius:16px 16px 5px 16px;
  max-width:85%;
  font-size:13.5px;
  animation:rise-right .35s var(--bounce) both;
}

@keyframes rise-left{
  from{ opacity:0; transform:translate(-10px, 8px) scale(.94); }
  to{ opacity:1; transform:translate(0,0) scale(1); }
}

@keyframes rise-right{
  from{ opacity:0; transform:translate(10px, 8px) scale(.94); }
  to{ opacity:1; transform:translate(0,0) scale(1); }
}

/* ---------- Input area (pill shapes, echoing "Let's Connect") ---------- */
.chat-input-area{
  display:flex;
  padding:14px;
  gap:10px;
  background:rgba(255,255,255,.02);
  border-top:1px solid var(--border-soft);
}

.chat-input-area input{
  flex:1;
  min-width:0;
  background:var(--bg-sunken);
  border:1px solid var(--border-soft);
  outline:none;
  color:var(--text-primary);
  padding:12px 16px;
  border-radius:999px;
  font-size:13.5px;
  font-family:'Inter', sans-serif;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.chat-input-area input::placeholder{ color:#6b6b73; }

.chat-input-area input:focus{
  border-color:var(--accent-1);
  box-shadow:0 0 0 3px rgba(124,58,237,.18);
}

.chat-input-area button{
  width:44px;
  height:44px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent-1),#5b5df7);
  color:transparent;
  font-size:0;
  cursor:pointer;
  position:relative;
  transition:transform .25s var(--bounce), opacity .2s, box-shadow .25s var(--ease);
}

.chat-input-area button::before{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:17px;
  height:17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}

.chat-input-area button:hover{
  transform:scale(1.08) rotate(-8deg);
  box-shadow:0 6px 18px var(--accent-glow);
}

.chat-input-area button:active{ transform:scale(.92); }
.chat-input-area button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- Typing / loading indicator ---------- */
.loading{
  color:transparent;
  font-size:0;
  display:inline-flex;
  gap:5px;
  align-items:center;
  padding:6px 2px;
}

.loading::before, .loading::after{ content:''; }

.loading span, .loading::before, .loading::after{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--text-muted);
  display:inline-block;
  animation:bounce-dot 1.1s infinite ease-in-out;
}

.loading::before{ animation-delay:0s; }
.loading::after{ animation-delay:.3s; }

@keyframes bounce-dot{
  0%,60%,100%{ transform:translateY(0); opacity:.4; }
  30%{ transform:translateY(-5px); opacity:1; }
}

.chat-messages::-webkit-scrollbar{ width:5px; }
.chat-messages::-webkit-scrollbar-thumb{
  background:#3a3a40;
  border-radius:20px;
  transition:background .2s;
}
.chat-messages::-webkit-scrollbar-thumb:hover{ background:var(--accent-1); }

@media(max-width:600px){

  .chat-toggle{
    right:16px !important;
    bottom:16px !important;
    bottom:calc(16px + env(safe-area-inset-bottom)) !important;
    right:calc(16px + env(safe-area-inset-right)) !important;
    width:54px !important;
    height:54px !important;
  }

  /* Full-screen sheet instead of a small floating card -- much easier
     to read and tap on a phone than a shrunk-down desktop popup. */
  .chat-window{
    width:100vw !important;
    max-width:100vw;
    height:100vh !important;
    max-height:100dvh;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    border-radius:0;
    transform:translateY(100%) !important;
  }

  .chat-window.active{
    transform:translateY(0) !important;
  }

  .chat-header{
    padding:calc(14px + env(safe-area-inset-top)) 16px 14px 16px;
  }

  .chat-header h3{ font-size:16px; }
  .chat-header span{ font-size:12px; }

  .chat-header button{
    width:38px;
    height:38px;
    font-size:20px;
  }

  .chat-messages{ padding:16px; }

  .bot-message, .user-message{
    max-width:90%;
    font-size:14.5px;
  }

  .chat-input-area{
    padding:12px 14px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }

  /* 16px minimum stops iOS Safari auto-zooming into the field on focus */
  .chat-input-area input{
    font-size:16px;
    padding:13px 16px;
  }

  .chat-input-area button{
    width:48px;
    height:48px;
  }
}

@media(max-width:600px) and (prefers-reduced-motion: no-preference){
  .chat-window{
    transition:transform .3s var(--bounce), visibility 0s linear .3s;
  }
  .chat-window.active{
    transition:transform .35s var(--bounce);
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .chat-toggle{ animation:none; }
}