/* Balliante AI Chat Widget — frontend styles */

:root {
	--bac-primary:   #4F46E5;
	--bac-secondary: #FFFFFF;
	--bac-font:      inherit;
	--bac-radius:    14px;
	--bac-shadow:    0 8px 32px rgba(0,0,0,.18);
	--bac-z:         99999;
}

/* Ensure [hidden] always wins over display:flex/block rules in this widget */
#balliante-chat-root [hidden] { display: none !important; }

/* ── Root container ── */
#balliante-chat-root {
	position: fixed;
	bottom:   24px;
	z-index:  var(--bac-z);
	font-family: var(--bac-font);
}

#balliante-chat-root.bac-right { right: 24px; }
#balliante-chat-root.bac-left  { left:  24px; }

/* ── Toggle button ── */
#balliante-chat-toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:  56px;
	height: 56px;
	border-radius: 50%;
	border:  none;
	cursor:  pointer;
	background:  var(--bac-primary);
	color:       var(--bac-secondary);
	box-shadow:  var(--bac-shadow);
	transition:  transform .2s ease, box-shadow .2s ease;
	margin-left: auto;
}

#balliante-chat-toggle:hover {
	transform:  scale(1.08);
	box-shadow: 0 10px 36px rgba(0,0,0,.25);
}

/* ── Chat window ── */
#balliante-chat-window {
	position:     absolute;
	bottom:       72px;
	width:        360px;
	max-height:   560px;
	display:      flex;
	flex-direction: column;
	background:   #fff;
	border-radius: var(--bac-radius);
	box-shadow:   var(--bac-shadow);
	overflow:     hidden;
	animation:    bac-slideup .22s ease;
}

#balliante-chat-root.bac-right #balliante-chat-window { right: 0; }
#balliante-chat-root.bac-left  #balliante-chat-window { left:  0; }

@keyframes bac-slideup {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
#balliante-chat-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 16px;
	background:      var(--bac-primary);
	color:           var(--bac-secondary);
	flex-shrink: 0;
}

#balliante-chat-title {
	font-size:   15px;
	font-weight: 600;
}

#balliante-chat-close {
	background: transparent;
	border:     none;
	cursor:     pointer;
	color:      var(--bac-secondary);
	font-size:  18px;
	line-height: 1;
	padding:    0 4px;
	opacity:    .85;
}
#balliante-chat-close:hover { opacity: 1; }

/* ── Lead form ── */
#balliante-chat-lead-form {
	padding:   20px 20px 16px;
	flex:      1;
	overflow-y: auto;
}

.balliante-lead-intro {
	font-size:   13px;
	color:       #555;
	margin:      0 0 14px;
}

#balliante-chat-lead-form label {
	display:     block;
	font-size:   12px;
	font-weight: 600;
	color:       #333;
	margin-bottom: 4px;
	margin-top:  10px;
}

#balliante-chat-lead-form input[type="text"],
#balliante-chat-lead-form input[type="email"] {
	width:         100%;
	padding:       9px 12px;
	border:        1px solid #ddd;
	border-radius: 8px;
	font-size:     14px;
	box-sizing:    border-box;
	transition:    border-color .15s;
}

#balliante-chat-lead-form input:focus {
	outline:       none;
	border-color:  var(--bac-primary);
	box-shadow:    0 0 0 3px color-mix(in srgb, var(--bac-primary) 20%, transparent);
}

.balliante-error {
	font-size:    12px;
	color:        #c0392b;
	margin-top:   8px;
	padding:      8px 10px;
	background:   #fdf0f0;
	border-radius: 6px;
}

#balliante-lead-submit {
	display:      block;
	width:        100%;
	margin-top:   16px;
	padding:      10px 0;
	background:   var(--bac-primary);
	color:        var(--bac-secondary);
	border:       none;
	border-radius: 8px;
	font-size:    14px;
	font-weight:  600;
	cursor:       pointer;
	transition:   opacity .15s;
}
#balliante-lead-submit:hover    { opacity: .88; }
#balliante-lead-submit:disabled { opacity: .55; cursor: default; }

/* ── Conversation ── */
#balliante-chat-conversation {
	display:       flex;
	flex-direction: column;
	flex:          1;
	overflow:      hidden;
}

#balliante-chat-messages {
	flex:       1;
	overflow-y: auto;
	padding:    16px 14px 8px;
	display:    flex;
	flex-direction: column;
	gap:        10px;
}

/* ── Message bubbles ── */
.bac-message {
	max-width:     82%;
	padding:       10px 13px;
	border-radius: 14px;
	font-size:     14px;
	line-height:   1.55;
	word-break:    break-word;
}

.bac-user {
	align-self:    flex-end;
	background:    var(--bac-primary);
	color:         var(--bac-secondary);
	border-bottom-right-radius: 4px;
}

.bac-assistant {
	align-self:    flex-start;
	background:    #f1f3f5;
	color:         #1a1a1a;
	border-bottom-left-radius: 4px;
}

/* Markdown inside assistant bubbles */
.bac-assistant p        { margin: 0 0 .5em; }
.bac-assistant p:last-child { margin-bottom: 0; }
.bac-assistant ul,
.bac-assistant ol       { margin: .3em 0 .5em 1.2em; padding: 0; }
.bac-assistant li       { margin-bottom: .2em; }
.bac-assistant code     { background: #e8eaed; padding: 2px 5px; border-radius: 4px; font-size: 12px; }
.bac-assistant pre      { background: #282c34; color: #abb2bf; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin: .5em 0; }
.bac-assistant pre code { background: none; padding: 0; font-size: inherit; }
.bac-assistant a        { color: var(--bac-primary); }
.bac-assistant strong   { font-weight: 700; }
.bac-assistant em       { font-style: italic; }

/* ── Typing indicator ── */
#balliante-typing-indicator {
	display:    flex;
	align-items: center;
	gap:        5px;
	padding:    6px 14px 4px;
}

#balliante-typing-indicator span {
	display:       block;
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    #adb5bd;
	animation:     bac-bounce 1.2s infinite ease-in-out;
}
#balliante-typing-indicator span:nth-child(2) { animation-delay: .2s; }
#balliante-typing-indicator span:nth-child(3) { animation-delay: .4s; }

@keyframes bac-bounce {
	0%, 80%, 100% { transform: translateY(0); }
	40%           { transform: translateY(-6px); }
}

/* ── Rate limit warning ── */
#balliante-rate-warning {
	font-size:   11px;
	color:       #856404;
	background:  #fff3cd;
	padding:     6px 14px;
	flex-shrink: 0;
}

/* ── Input area ── */
#balliante-chat-input-area {
	display:    flex;
	align-items: flex-end;
	gap:        8px;
	padding:    8px 12px;
	border-top: 1px solid #e9ecef;
	flex-shrink: 0;
}

#balliante-chat-input {
	flex:        1;
	resize:      none;
	border:      1px solid #ddd;
	border-radius: 10px;
	padding:     8px 12px;
	font-size:   13px;
	font-family: var(--bac-font);
	line-height: 1.45;
	max-height:  120px;
	overflow-y:  auto;
	transition:  border-color .15s;
}
#balliante-chat-input:focus {
	outline:      none;
	border-color: var(--bac-primary);
}
#balliante-chat-input:disabled { background: #f8f9fa; }

#balliante-send-btn {
	flex-shrink:  0;
	width:   38px;
	height:  38px;
	border:  none;
	border-radius: 50%;
	background:  var(--bac-primary);
	color:       var(--bac-secondary);
	cursor:      pointer;
	display:     flex;
	align-items: center;
	justify-content: center;
	transition:  opacity .15s;
}
#balliante-send-btn:hover    { opacity: .85; }
#balliante-send-btn:disabled { opacity: .45; cursor: default; }

/* ── Footer / human button ── */
#balliante-chat-footer {
	padding:     6px 12px 10px;
	flex-shrink: 0;
}

#balliante-human-btn {
	background:   transparent;
	border:       1px solid var(--bac-primary);
	color:        var(--bac-primary);
	border-radius: 20px;
	padding:      5px 14px;
	font-size:    12px;
	cursor:       pointer;
	transition:   background .15s, color .15s;
}
#balliante-human-btn:hover:not(:disabled) {
	background: var(--bac-primary);
	color:      var(--bac-secondary);
}
#balliante-human-btn:disabled {
	border-color: #adb5bd;
	color:        #6c757d;
	cursor:       default;
}

/* ── Responsive ── */
@media (max-width: 420px) {
	#balliante-chat-window {
		width:      calc(100vw - 32px);
		max-height: 75vh;
	}
	#balliante-chat-root.bac-right { right: 8px; }
	#balliante-chat-root.bac-left  { left:  8px; }
}