.bchat-wrap { font-family: 'Source Sans Pro', 'Source Sans 3', Calibri, Arial, sans-serif; padding: 48px 24px; background: #ffffff; }
.bchat-wrap .bchat { max-width: 980px; margin: 0 auto; }
.bchat-wrap .bchat [hidden] { display: none !important; }
.bchat-wrap .bchat p { margin: 0; }
.bchat-wrap .bchat-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.bchat-wrap .bchat-window {
  display: flex; height: 580px; background: #eff1f5; color: #2a3850; overflow: hidden;
  border-radius: 22px; box-shadow: 0 30px 70px rgba(42, 56, 80, 0.22), 0 0 0 1px rgba(42, 56, 80, 0.08);
}

/* Sidebar: fixed width */
.bchat-wrap .bchat-side { flex: 0 0 230px; width: 230px; max-width: 230px; min-width: 0; overflow: hidden; background: #f7f8fb; border-right: 1px solid #dfe3eb; padding: 14px 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.bchat-wrap .bchat-brand { display: flex; align-items: center; gap: 10px; background: #ffffff; border-radius: 12px; padding: 9px 10px; box-shadow: 0 2px 8px rgba(42, 56, 80, 0.06); min-width: 0; }
.bchat-wrap .bchat-brand img { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; }
.bchat-wrap .bchat-brand strong { display: block; font-size: 17px; color: #48608a !important; line-height: 1.1; }
.bchat-wrap .bchat-brand span { display: block; font-size: 12px; color: #4f586b !important; }
.bchat-wrap .bchat-new { background: linear-gradient(90deg, #f0bd18, #f7d978); border-radius: 10px; text-align: center; padding: 9px; font-size: 15px; color: #2a3850 !important; }
.bchat-wrap .bchat-hist { background: #e8ebf1; border-radius: 10px; padding: 8px 11px; min-width: 0; overflow: hidden; }
.bchat-wrap .bchat-hist span { display: block; font-size: 14px; color: #2a3850 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bchat-wrap .bchat-hist small { display: block; font-size: 12px; color: #4f586b !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bchat-wrap .bchat-hist--active { background: linear-gradient(90deg, #48608a, #2a3850); }
.bchat-wrap .bchat-hist--active span { color: #ffffff !important; }
.bchat-wrap .bchat-hist--active small { color: #d4dae5 !important; }
.bchat-wrap .bchat-side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bchat-wrap .bchat-settings { width: 100%; background: #e8ebf1; border-radius: 10px; text-align: center; padding: 7px; font-size: 14px; color: #2a3850 !important; box-sizing: border-box; }
.bchat-wrap .bchat-side-foot small { font-size: 11px; color: #4f586b !important; margin-top: 2px; }
.bchat-wrap .bchat-logo { display: block; width: 130px; max-width: 100%; height: auto; }

/* Main */
.bchat-wrap .bchat-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bchat-wrap .bchat-top { flex: 0 0 56px; border-bottom: 1px solid #dfe3eb; display: flex; align-items: center; gap: 10px; padding: 0 20px; font-size: 17px; color: #2a3850 !important; }
.bchat-wrap .bchat-top-avatar { display: none; width: 30px; height: 30px; border-radius: 50%; }
.bchat-wrap .bchat-online { margin-left: auto; width: 11px; height: 11px; border-radius: 50%; background: #5ccf86; }

.bchat-wrap .bchat-msgs { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 18px 20px; }
.bchat-wrap .bchat-greet { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.bchat-wrap .bchat-greet img { width: 96px; height: 96px; border-radius: 50%; }
.bchat-wrap .bchat-greet-title { font-size: 23px; color: #2a3850 !important; }
.bchat-wrap .bchat-greet-text { font-size: 15px; line-height: 1.5; color: #4f586b !important; max-width: 380px; }

.bchat-wrap .bchat-user { display: flex; justify-content: flex-end; flex: 0 0 auto; }
.bchat-wrap .bchat-user-bubble { max-width: 80%; background: linear-gradient(110deg, #2a3850, #48608a); border-radius: 14px; padding: 12px 15px; box-shadow: 0 4px 12px rgba(42, 56, 80, 0.18); }
.bchat-wrap .bchat-user-text { font-size: 15px; line-height: 1.45; color: #ffffff !important; }
.bchat-wrap .bchat-user-status { display: block; font-size: 12px; color: #c8d0de !important; margin-top: 5px; }

.bchat-wrap .bchat-row { display: flex; align-items: flex-start; gap: 9px; flex: 0 0 auto; }
.bchat-wrap .bchat-row img { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; }
.bchat-wrap .bchat-think-bubble { background: #e3e7ef; border: 1px solid #d3d9e4; border-radius: 12px; padding: 9px 13px; display: flex; align-items: center; gap: 9px; }
.bchat-wrap .bchat-quip { font-size: 14px; color: #48608a !important; }
.bchat-wrap .bchat-dots { display: flex; gap: 3px; flex: 0 0 auto; }
.bchat-wrap .bchat-dots i { width: 6px; height: 6px; border-radius: 50%; background: #2a3850; opacity: 0.3; animation: bchat-dot 0.9s infinite; }
.bchat-wrap .bchat-dots i:nth-child(2) { animation-delay: 0.3s; }
.bchat-wrap .bchat-dots i:nth-child(3) { animation-delay: 0.6s; }
@keyframes bchat-dot { 0%, 100% { opacity: 0.3; } 33% { opacity: 1; } }

.bchat-wrap .bchat-ans-bubble { max-width: 86%; background: #e3e7ef; border: 1px solid #d3d9e4; border-radius: 14px; padding: 13px 15px; box-shadow: 0 2px 8px rgba(42, 56, 80, 0.06); }
.bchat-wrap .bchat-p1, .bchat-wrap .bchat-p2 { font-size: 15px; line-height: 1.5; color: #2a3850 !important; }
.bchat-wrap .bchat-p2 { margin-top: 10px !important; }
.bchat-wrap .bchat-ans-time { display: block; font-size: 12px; color: #4f586b !important; margin-top: 6px; }

/* Input: grows upwards as text is typed */
.bchat-wrap .bchat-bottom { flex: 0 0 auto; border-top: 1px solid #dfe3eb; padding: 12px 20px 8px; }
.bchat-wrap .bchat-input-row { display: flex; align-items: flex-end; gap: 10px; }
.bchat-wrap .bchat-input { flex: 1 1 auto; min-width: 0; min-height: 42px; box-sizing: border-box; border: 1.5px solid #cdd4e0; background: #ffffff; border-radius: 12px; padding: 10px 14px; font-size: 15px; line-height: 1.4; white-space: normal; word-wrap: break-word; }
.bchat-wrap .bchat-ph { color: #6b7385 !important; }
.bchat-wrap .bchat-typed { color: #2a3850 !important; }
.bchat-wrap .bchat-caret { display: inline-block; vertical-align: text-bottom; width: 1.5px; height: 18px; background: #2a3850; margin-left: 1px; animation: bchat-blink 0.9s steps(1) infinite; }
@keyframes bchat-blink { 50% { opacity: 0; } }
.bchat-wrap .bchat-send { flex: 0 0 42px; height: 42px; border-radius: 12px; background: #f7e3a0; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.bchat-wrap .bchat-send.is-active { background: #f0bd18; }
.bchat-wrap .bchat-disc { font-size: 11px; color: #5d6578 !important; text-align: center; margin-top: 7px