/* ChatBot Flow — Widget flutuante (front-end) */
.cbf-fab{
	position: fixed;
	bottom: 24px;
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--cbf-widget-color, #6c5ce7);
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	display: flex; align-items:center; justify-content:center;
	cursor: pointer; z-index: 999999;
	border: none; transition: transform .15s ease, opacity .15s ease;
}
.cbf-fab:hover{ transform: scale(1.06); }
.cbf-fab svg{ width: 26px; height: 26px; fill: #fff; }
.cbf-fab.cbf-pos-right{ right: 24px; }
.cbf-fab.cbf-pos-left{ left: 24px; }
.cbf-fab.cbf-fab-has-image{ padding: 0; overflow: hidden; }
.cbf-fab-image{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display:block; }
.cbf-fab.cbf-fab-hidden{ opacity: 0; transform: scale(.8); pointer-events: none; }

.cbf-modal-overlay{
	position: fixed; inset: 0; background: rgba(10,10,15,0.35);
	z-index: 999998; display: none; align-items: flex-end; justify-content: flex-end;
	padding: 24px;
}
.cbf-modal-overlay.cbf-pos-left{ justify-content: flex-start; }
.cbf-modal-overlay.is-open{ display: flex; }

.cbf-modal{
	width: 380px; max-width: 92vw; height: 600px; max-height: 82vh;
	background: #16161f; border-radius: 18px; overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 24px 60px rgba(0,0,0,0.4);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	animation: cbf-pop .18s ease;
}
@keyframes cbf-pop{ from{ opacity:0; transform: translateY(16px);} to{opacity:1; transform:none;} }

.cbf-modal-header{
	background: var(--cbf-widget-color, #6c5ce7);
	color: #fff; padding: 16px 18px;
	display:flex; align-items:center; justify-content:space-between;
}
.cbf-modal-header h4{ margin:0; font-size: 15px; font-weight: 700; }
.cbf-modal-header span{ font-size: 11px; opacity:.85; }
.cbf-modal-close{ background: rgba(255,255,255,0.15); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1; }

.cbf-modal-body{ flex:1; overflow-y:auto; padding: 16px; display:flex; flex-direction:column; gap:10px; background:#101018; }
.cbf-bubble{ max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height:1.45; }
.cbf-bubble-bot{ background:#22222e; color:#e6e6ef; align-self:flex-start; border-bottom-left-radius:4px; }
.cbf-bubble-user{ background: var(--cbf-widget-color, #6c5ce7); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.cbf-bubble-media{ padding:6px; max-width:80%; background:#1a1a24; }
.cbf-bubble-media img, .cbf-bubble-media video{ max-width:100%; border-radius:10px; display:block; }
.cbf-bubble-media audio{ width:220px; }
.cbf-bubble-options{ display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:100%; }
.cbf-option-btn{ background:#22222e; border:1px solid #33333f; color:#e6e6ef; padding:8px 12px; border-radius:20px; font-size:12px; cursor:pointer; }
.cbf-option-btn:hover{ background: var(--cbf-widget-color, #6c5ce7); border-color: transparent; color:#fff; }

.cbf-modal-footer{ display:flex; align-items:center; gap:8px; padding: 12px; border-top: 1px solid #22222e; background:#16161f; }
.cbf-modal-input{ flex:1; background:#22222e; border:1px solid #33333f; color:#fff; border-radius: 22px; padding: 10px 16px; font-size:13px; outline:none; }
.cbf-modal-send{ background: var(--cbf-widget-color, #6c5ce7); border:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.cbf-modal-send svg{ width:16px; height:16px; fill:#fff; }

.cbf-typing{ display:flex; gap:4px; align-self:flex-start; padding: 10px 14px; }
.cbf-typing span{ width:6px; height:6px; border-radius:50%; background:#8a8aa0; animation: cbf-blink 1.2s infinite ease-in-out; }
.cbf-typing span:nth-child(2){ animation-delay:.2s; }
.cbf-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes cbf-blink{ 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }

/* Chat inline via shortcode */
.cbf-inline-chat{ border:1px solid #22222e; border-radius: 16px; overflow:hidden; display:flex; flex-direction:column; background:#16161f; }