/* --- ROOT / RESET ÎN WIDGET --- */
#bp-ai-widget{
  position:fixed;
  bottom:60px;
  right:20px;
  left:auto;
  z-index:999999;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* ✅ ACCENTS (editable from Admin via CSS vars / JS applyThemeVars) */
  --bp-accent-1:#09d7fc; /* light cyan */
  --bp-accent-2:#00cefe; /* cyan */
  --bp-accent-3:#4b68bd; /* blue */
  --bp-accent-4:#022381; /* deep navy */

  /* ✅ EXTRA THEME VARS (editable from Admin) */
  --bp-panel-bg:#050608;
  --bp-panel-text:#f5f7fb;
  --bp-border:#00cefe;

  --bp-bubble-bg:#121417;
  --bp-bubble-border:#1e2228;
  --bp-bubble-text:#f5f7fb;

  --bp-user-text:#071018;       /* user bubble text */
  --bp-btn-text:#071018;        /* send button text */

  --bp-input-bg:#0b0c0e;
  --bp-input-text:#f5f7fb;
  --bp-input-border:#2a2f36;

  --bp-header-text:#ffffff;
  --bp-header-ctrl-bg:#111111;  /* header contact button bg */
  --bp-header-ctrl-text:var(--bp-accent-2);

  --bp-modal-bg:#121417;
  --bp-modal-text:#f5f7fb;
  --bp-modal-field-bg:#0b0c0e;
  --bp-modal-field-text:#f5f7fb;
  --bp-modal-field-border:#2a2f36;

  /* Quick replies (used by injected CSS in JS, but also available here) */
  --bp-qr-bg:#5386fa;
  --bp-qr-text:#ffffff;

  /* ✅ NEW: background image only for conversation area (#bp-ai-body) */
  --bp-chat-bg-img:none;        /* ex: url("...") */
  --bp-chat-bg-opacity:0.18;    /* 0..1 */

  /* Derived rgb for pulse/focus (keeps compatibility) */
  --bp-accent-rgb:0,206,254; /* for rgba() */
}
#bp-ai-widget *, #bp-ai-widget *::before, #bp-ai-widget *::after {
  box-sizing: border-box;
  font-family: inherit;
}

/* --- FAB BUTON PLUTITOR (PULSE) --- */
#bp-ai-fab{
  width:78px;
  height:78px;
  border:0;
  background:radial-gradient(circle at 30% 30%, #cfd6e3 0, var(--bp-accent-2) 40%, var(--bp-accent-4) 100%);
  padding:3px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 20px 60px rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:bp-ai-pulse 2.4s infinite;
  transition: transform 0.2s;
}
#bp-ai-fab:hover { transform: scale(1.05); }
#bp-ai-fab img{
  width:70px;
  height:70px;
  border-radius:999px;
  display:block;
  object-fit:cover;
}

/* --- PANEL CHAT --- */
#bp-ai-panel{
  width:390px;
  max-width:92vw;
  background:var(--bp-panel-bg);
  color:var(--bp-panel-text);
  border-radius:20px;
  box-shadow:0 28px 80px rgba(0,0,0,.95);
  overflow:hidden;
  border:1px solid var(--bp-border);
  display:flex;
  flex-direction:column;
}

/* HEADER */
#bp-ai-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--bp-accent-2) 0, var(--bp-accent-3) 40%, var(--bp-accent-4) 100%);
  color:var(--bp-header-text);
}
.bp-ai-head-left{ display:flex; align-items:center; gap:10px; }
#bp-ai-avatar{
  width:40px; height:40px; border-radius:999px;
  border:2px solid rgba(0,0,0,.35);
  background:var(--bp-input-bg);
  object-fit:cover;
}
.bp-ai-head-meta{ display:flex; flex-direction:column; line-height:1.1; }
#bp-ai-agent-name{ font-weight:900; text-transform:uppercase; font-size:14px; }
.bp-ai-head-sub{ font-size:11px; opacity:.9; }
.bp-ai-head-actions{ display:flex; align-items:center; gap:8px; }

/* Butonul din Header (fostul Offer, acum Programare/Info) */
.bp-ai-offer-btn{
  border:0;
  background:var(--bp-header-ctrl-bg);
  color:var(--bp-header-ctrl-text);
  padding:7px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.bp-ai-offer-btn:hover{ background:#fff; color:#111; }

#bp-ai-close{
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--bp-header-text);
}

/* BODY + MESAJE */
#bp-ai-body{
  padding:10px 10px 12px;
  color:var(--bp-panel-text);

  /* ✅ background image overlay only here */
  position:relative;
}

/* ✅ background image layer (ONLY conversation area) */
#bp-ai-body::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--bp-chat-bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--bp-chat-bg-opacity);
  pointer-events:none;
  z-index:0;
}

/* ✅ ensure content is above background */
#bp-ai-messages,
#bp-ai-row{
  position:relative;
  z-index:1;
}

#bp-ai-messages{
  height:350px; /* Putin mai inalt pentru medical */
  overflow-y:auto;
  padding:6px 2px;
  scroll-behavior:smooth;
}
.bp-ai-msg{ display:flex; margin:7px 0; }
.bp-ai-msg.user{ justify-content:flex-end; }

.bp-ai-bub{
  max-width:86%;
  padding:10px 13px;
  border-radius:16px;
  line-height:1.4;
  background:var(--bp-bubble-bg);
  border:1px solid var(--bp-bubble-border);
  color:var(--bp-bubble-text);
  font-size:14px;
}

/* User Bubble Style */
.bp-ai-msg.user .bp-ai-bub{
  background:linear-gradient(135deg, var(--bp-accent-2), var(--bp-accent-3));
  border-color:var(--bp-accent-2);
  color:var(--bp-user-text);
  font-weight:700;
}

/* --- MEDICAL ALERTS (NOU PENTRU TRIAJ) --- */
.bp-ai-alert-red{
  border:2px solid #dc2626 !important;
  background:#450a0a !important; /* Dark Red background */
  color:#fecaca !important;
  font-weight:bold;
}
.bp-ai-alert-yellow{
  border:1px solid #ca8a04 !important;
  background:#422006 !important; /* Dark Yellow/Brown */
  color:#fef08a !important;
}
.bp-ai-action-btn{
  display:block;
  width:100%;
  margin-top:8px;
  background:#2563eb;
  color:#fff;
  text-align:center;
  padding:8px;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
  border:none;
  cursor:pointer;
}
.bp-ai-action-btn:hover{ background:#1d4ed8; }

/* INPUT ROW */
#bp-ai-row{ display:flex; gap:8px; margin-top:8px; }

#bp-ai-input{
  flex:1;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--bp-input-border);
  background:var(--bp-input-bg);
  color:var(--bp-input-text);
  font-size:14px;
  outline:none;
}
#bp-ai-input:focus{
  border-color:var(--bp-accent-2);
  box-shadow:0 0 0 1px rgba(var(--bp-accent-rgb),.6);
}

#bp-ai-send{
  padding:0 20px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg, var(--bp-accent-2), var(--bp-accent-3));
  color:var(--bp-btn-text);
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
#bp-ai-send:hover{ filter:brightness(1.1); }
#bp-ai-send:disabled{ filter:grayscale(1); cursor:not-allowed; opacity:.7; }

/* MODAL (Păstrat pentru colectare date pacient) */
#bp-ai-offer-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000000;
}
.bp-ai-offer-card{
  width:min(520px,92vw);
  background:var(--bp-modal-bg);
  border:1px solid var(--bp-accent-2);
  border-radius:18px;
  padding:20px;
  color:var(--bp-modal-text);
  box-shadow:0 24px 80px rgba(0,0,0,.9);
}
.bp-ai-offer-title{
  font-weight:900;
  margin-bottom:15px;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:16px;
}
#bp-ai-offer-modal input,
#bp-ai-offer-modal textarea{
  width:100%;
  margin:8px 0;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--bp-modal-field-border);
  background:var(--bp-modal-field-bg);
  color:var(--bp-modal-field-text);
  font-size:14px;
}
#bp-ai-offer-modal input:focus,
#bp-ai-offer-modal textarea:focus{
  border-color:var(--bp-accent-2);
  outline:none;
}
.bp-ai-offer-actions{ display:flex; gap:10px; margin-top:15px; }

#bp-ai-offer-send{
  flex:1;
  padding:12px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg, var(--bp-accent-2), var(--bp-accent-3));
  color:var(--bp-btn-text);
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
}
#bp-ai-offer-close{
  padding:12px 20px;
  border-radius:12px;
  border:1px solid var(--bp-modal-field-border);
  background:transparent;
  color:var(--bp-modal-text);
  font-weight:800;
  cursor:pointer;
}

/* ANIMATIONS */
@keyframes bp-ai-pulse{
  0%{ box-shadow:0 0 0 0 rgba(var(--bp-accent-rgb),.65); }
  70%{ box-shadow:0 0 0 20px rgba(var(--bp-accent-rgb),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--bp-accent-rgb),0); }
}

/* Typing Indicator (Dots) */
.bp-ai-typing span{
  display:inline-block;
  width:6px;
  height:6px;
  background-color:var(--bp-accent-2);
  border-radius:50%;
  animation:bp-typing 1.4s infinite ease-in-out both;
  margin:0 2px;
}
.bp-ai-typing span:nth-child(1){ animation-delay:-0.32s; }
.bp-ai-typing span:nth-child(2){ animation-delay:-0.16s; }
@keyframes bp-typing{
  0%,80%,100%{ transform:scale(0); }
  40%{ transform:scale(1); }
}

@media (max-width:480px){

  /* ✅ iOS safe-area + ridică deasupra barei de jos */
  #bp-ai-widget{
    right: 12px;
    left: auto;

    /* IMPORTANT: nu folosi bottom fix mic pe iPhone */
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* ✅ panel mai înalt și “lipit” corect în viewport */
  #bp-ai-panel{
    width: 92vw;
    max-height: calc(92vh - env(safe-area-inset-bottom, 0px));
    border-radius: 18px;
  }

  /* ✅ body flex ca să nu se taie input-ul */
  #bp-ai-body{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  /* ✅ mesaje ocupă spațiul rămas */
  #bp-ai-messages{
    flex: 1 1 auto;
    height: auto;
    min-height: 52vh; /* mai mult spațiu conversație */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ input row rămâne jos */
  #bp-ai-row{
    flex: 0 0 auto;
  }

  /* ✅ fab mai mic */
  #bp-ai-fab{
    width: 56px;
    height: 56px;
  }
  #bp-ai-fab img{
    width: 48px;
    height: 48px;
  }
}