/* BizTriAI Chat — updated styling */

/* brand vars (fall back to your site's if present) */
:root{
  --bz-bg: var(--bg, #050505);
  --bz-panel: var(--bg2, #0f0f0f);
  --bz-text: var(--text, #ffffff);
  --bz-muted: var(--muted, #a0a0a0);
  --bz-brand: var(--brand, #6366f1);
  --bz-brand2: var(--brand2, #8b5cf6);
  --bz-stroke: rgba(99,102,241,.18);
}

/* floating button */
.bt-fab{
  position: fixed;
  right: 20px;
  bottom: var(--bzchat-bottom, 20px);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 50%;
  border: 1px solid var(--bz-stroke);
  background: linear-gradient(135deg, #1a1a1a, #101010);
  color: var(--bz-text);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  cursor: pointer;
  z-index: 99999;
}

/* panel */
.bt-chat{
  position: fixed;
  right: 20px;
  bottom: calc(var(--bzchat-bottom, 20px) + 72px);
  width: min(380px, 94vw);
  max-height: 82vh;
  display: none;
  flex-direction: column;
  background: var(--bz-panel);
  color: var(--bz-text);
  border: 1px solid var(--bz-stroke);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  overflow: hidden;
  z-index: 100000;
}
.bt-chat.bt-open{ display: flex; }

.bt-header{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  background: rgba(10,10,12,.96);
  border-bottom: 1px solid var(--bz-stroke);
}
.bt-title{ font-weight: 800; }

.bt-body{
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px;
  min-height: 260px;
}

.bt-messages{
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 6px;
  scrollbar-gutter: stable both-edges;
}

/* bubbles */
.bt-bubble{
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--bz-stroke);
  background: rgba(255,255,255,.035);
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 14px;
}

/* BOT BUBBLE OUTLINE PURPLE */
.bt-bubble.bot {
  border: 1px solid var(--bz-brand);
}

/* USER BUBBLES */
.bt-bubble.me{
  align-self: flex-end;
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.28);
}

.bt-bubble a{
  color: var(--bz-brand);
  font-weight: 600;
  text-decoration: underline;
}

/* chips: single row, styled purple scrollbar */
.bt-quick{
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--bz-brand) transparent;
}

.bt-quick::-webkit-scrollbar {
  height: 6px;
}
.bt-quick::-webkit-scrollbar-thumb {
  background-color: var(--bz-brand);
  border-radius: 6px;
}
.bt-quick::-webkit-scrollbar-track {
  background: transparent;
}

.bt-chip{
  display: inline-block;
  margin-right: 8px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--bz-text);
  background: rgba(99,102,241,.10);
  border: 1px solid var(--bz-stroke);
}

/* typing hint */
.bt-typing{
  font-size: 12px;
  color: var(--bz-muted);
  opacity: .75;
  display: none;
}

/* input row stays visible */
.bt-input{
  position: sticky;
  bottom: 0;
  display: flex; gap: 8px; align-items: flex-end;
  background: linear-gradient(180deg, transparent, rgba(12,12,14,.85));
  padding-top: 4px;
}
.bt-text{
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  line-height: 1.38;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bz-stroke);
  background: #121214;
  color: var(--bz-text);
  overflow-y: auto;
}
.bt-send{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--bz-stroke);
  background: linear-gradient(135deg, var(--bz-brand), var(--bz-brand2));
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 768px){
  .bt-chat{
    right: 12px; left: 12px;
    width: auto;
    bottom: calc(var(--bzchat-bottom, 20px) + 84px);
  }
  .bt-fab{ right: 12px; }
}