:root{
  --ba-purple: #6A1B9A;
  --ba-magenta: #E6007E;
  --ba-gradient: linear-gradient(90deg, var(--ba-purple), var(--ba-magenta));

  --panel: #ffffff;
  --soft: #f6f6f8;
  --text: #111827;
  --muted: #6b7280;
  --border: rgba(17,24,39,.12);

  --shadow: 0 26px 80px rgba(0,0,0,.18);

  --radius-outer: 26px;
  --radius-inner: 20px;

  --frame: 4px;

  --pad: 18px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }

/* FAB */
.chat-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: none;
  background: var(--ba-gradient);
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  transition: transform .12s ease, filter .12s ease;
  z-index: 9999;
}
.chat-fab:hover{ transform: translateY(-1px); filter: brightness(.98); }
.chat-fab:active{ transform: translateY(0px); }

/* Panel / Widget */
.chat-widget{
  position: fixed;
  right: 18px;
  bottom: 90px;
  width: min(392px, calc(100vw - 36px));
  height: min(580px, calc(100vh - 140px));

  background: var(--ba-gradient);
  padding: var(--frame);
  border-radius: var(--radius-outer);
  box-shadow: var(--shadow);

  display: none;
  overflow: hidden;
  z-index: 9999;
}

.chat-widget.is-open{
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.chat-widget.is-open::before{
  content:"";
  position:absolute;
  inset: var(--frame);

  background: var(--panel);
  border-radius: var(--radius-inner);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 10px 30px rgba(17,24,39,.06);

  z-index: 0;
}

.chat-header, .chat-messages, .chat-footer{
  position: relative;
  z-index: 1;
}

.chat-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 16px 16px 14px;

  background:
    radial-gradient(120% 140% at 100% 0%, rgba(230,0,126,.14) 0%, rgba(230,0,126,0) 55%),
    radial-gradient(120% 140% at 0% 0%, rgba(106,27,154,.16) 0%, rgba(106,27,154,0) 55%),
    var(--panel);

  border-bottom: 1px solid rgba(17,24,39,.10);

  border-top-left-radius: var(--radius-inner);
  border-top-right-radius: var(--radius-inner);
}

.chat-title{
  font-weight: 850;
  letter-spacing: .2px;
  font-family: var(--font);
}

.chat-close{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid var(--ba-magenta);
  background: #ffffff;
  color: var(--ba-magenta);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

.chat-close:hover{
  background: rgba(230,0,126,.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(230,0,126,.18);
}

.chat-close:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(230,0,126,.18);
}

/* Messages */
.chat-messages{
  padding: var(--pad);
  overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
  display:flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font);
}

/* Bubbles */
.bubble{
  max-width: 86%;
  padding: 11px 13px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  line-height: 1.35;
  font-size: 14px;
  white-space: pre-wrap;
  box-shadow: 0 8px 18px rgba(17,24,39,.05);
  font-family: var(--font);
}

.bubble.user{
  align-self: flex-end;
  background: rgba(230, 0, 126, .10);
  border-color: rgba(230, 0, 126, .18);
}

.bubble.bot{
  align-self: flex-start;
  background: #ffffff;
}

.bubble.bot.is-typing{
  color: var(--muted);
  background: var(--soft);
}

/* Sources */
.sources{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(17,24,39,.16);
  font-size: 12px;
  color: var(--muted);
}
.sources a{
  color: var(--ba-magenta);
  text-decoration: none;
}
.sources a:hover{ text-decoration: underline; }

/* Footer */
.chat-footer{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(17,24,39,.10);
  background: var(--panel);

  border-bottom-left-radius: var(--radius-inner);
  border-bottom-right-radius: var(--radius-inner);
}

/* Form */
.chat-form{
  display:flex;
  gap: 10px;
  align-items: center;
}

.chat-input{
  flex:1;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.14);
  background: #fff;
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease;
  font-family: var(--font);
}
.chat-input::placeholder{ color: rgba(107,114,128,.95); }
.chat-input:focus{
  border-color: rgba(230, 0, 126, .45);
  box-shadow: 0 0 0 4px rgba(230, 0, 126, .10);
}

.chat-send{
  border-radius: 14px;
  border: none;
  background: var(--ba-gradient);
  color: #fff;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .12s ease, filter .12s ease;
  font-family: var(--font);
}
.chat-send:hover{ transform: translateY(-1px); filter: brightness(.98); }
.chat-send:active{ transform: translateY(0px); }
.chat-send:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.chat-messages::-webkit-scrollbar{ width: 10px; }
.chat-messages::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.10);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.90);
}
.chat-messages::-webkit-scrollbar-thumb:hover{ background: rgba(17,24,39,.16); }

@media (max-width: 420px){
  .chat-widget{
    right: 10px;
    bottom: 82px;
    width: calc(100vw - 20px);
    height: min(72vh, 580px);
  }
}