/* AI Chat widget styles — all custom properties prefixed --wpbc-aic-* */

:root {
	--wpbc-aic-primary:      #2563eb;
	--wpbc-aic-primary-dark: #1d4ed8;
	--wpbc-aic-bg:           #ffffff;
	--wpbc-aic-border:       #e5e7eb;
	--wpbc-aic-text:         #111827;
	--wpbc-aic-text-muted:   #6b7280;
	--wpbc-aic-user-bg:      var(--wpbc-aic-primary);
	--wpbc-aic-user-text:    #ffffff;
	--wpbc-aic-bot-bg:       #f3f4f6;
	--wpbc-aic-bot-text:     #111827;
	--wpbc-aic-radius:       12px;
	--wpbc-aic-shadow:       0 4px 24px rgba(0,0,0,.12);
	--wpbc-aic-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Base widget
   ============================================================ */
.wpbc-aic-widget {
	font-family: var(--wpbc-aic-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--wpbc-aic-text);
	box-sizing: border-box;
}

.wpbc-aic-widget *,
.wpbc-aic-widget *::before,
.wpbc-aic-widget *::after {
	box-sizing: inherit;
}

/* ============================================================
   Inline layout
   ============================================================ */
.wpbc-aic-layout-inline {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--wpbc-aic-border);
	border-radius: var(--wpbc-aic-radius);
	background: var(--wpbc-aic-bg);
	overflow: hidden;
}

.wpbc-aic-layout-inline .wpbc-aic-messages {
	min-height: 280px;
	max-height: 420px;
}

/* ============================================================
   Floating layout
   ============================================================ */
.wpbc-aic-layout-floating {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	width: 380px;
	border-radius: var(--wpbc-aic-radius);
	background: var(--wpbc-aic-bg);
	box-shadow: var(--wpbc-aic-shadow);
	display: flex;
	flex-direction: column;
	transform-origin: bottom right;
	transition: transform .25s ease, opacity .25s ease;
}

.wpbc-aic-layout-floating .wpbc-aic-messages {
	height: 360px;
}

/* Minimised — floating: collapse to header only */
.wpbc-aic-layout-floating.wpbc-aic-minimised .wpbc-aic-messages,
.wpbc-aic-layout-floating.wpbc-aic-minimised .wpbc-aic-input-area,
.wpbc-aic-layout-floating.wpbc-aic-minimised .wpbc-aic-char-count,
.wpbc-aic-layout-floating.wpbc-aic-minimised .wpbc-aic-footer {
	display: none;
}

/* Minimised — inline: collapse to header only */
.wpbc-aic-layout-inline.wpbc-aic-minimised .wpbc-aic-messages,
.wpbc-aic-layout-inline.wpbc-aic-minimised .wpbc-aic-input-area,
.wpbc-aic-layout-inline.wpbc-aic-minimised .wpbc-aic-char-count,
.wpbc-aic-layout-inline.wpbc-aic-minimised .wpbc-aic-footer {
	display: none;
}

/* Mobile: full-screen floating */
@media (max-width: 480px) {
	.wpbc-aic-layout-floating {
		width: 100%;
		height: 100%;
		bottom: 0;
		right: 0;
		border-radius: 0;
	}

	.wpbc-aic-layout-floating .wpbc-aic-messages {
		flex: 1;
		height: auto;
	}
}

/* ============================================================
   Header
   ============================================================ */
.wpbc-aic-header {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .75em 1em;
	background: var(--wpbc-aic-primary);
	color: #fff;
	border-radius: var(--wpbc-aic-radius) var(--wpbc-aic-radius) 0 0;
	user-select: none;
}

.wpbc-aic-title {
	flex: 1;
	font-weight: 600;
	font-size: 1em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wpbc-aic-new-chat,
.wpbc-aic-toggle {
	background: none;
	border: none;
	color: rgba(255,255,255,.8);
	font-size: 1.15em;
	cursor: pointer;
	padding: .2em .4em;
	border-radius: 4px;
	line-height: 1;
	transition: background .15s, color .15s;
}

.wpbc-aic-new-chat:hover,
.wpbc-aic-toggle:hover {
	background: rgba(255,255,255,.2);
	color: #fff;
}

/* ============================================================
   Messages area
   ============================================================ */
.wpbc-aic-messages {
	overflow-y: auto;
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: .6em;
	background: var(--wpbc-aic-bg);
	scroll-behavior: smooth;
}

/* Message rows */
.wpbc-aic-msg {
	display: flex;
}

.wpbc-aic-msg--user {
	justify-content: flex-end;
}

.wpbc-aic-msg--assistant,
.wpbc-aic-msg--system {
	justify-content: flex-start;
}

/* Bubbles */
.wpbc-aic-bubble {
	max-width: 80%;
	padding: .55em .9em;
	border-radius: 18px;
	word-break: break-word;
	white-space: pre-wrap;
}

.wpbc-aic-msg--user .wpbc-aic-bubble {
	background: var(--wpbc-aic-user-bg);
	color: var(--wpbc-aic-user-text);
	border-bottom-right-radius: 4px;
}

.wpbc-aic-msg--assistant .wpbc-aic-bubble {
	background: var(--wpbc-aic-bot-bg);
	color: var(--wpbc-aic-bot-text);
	border-bottom-left-radius: 4px;
}

.wpbc-aic-msg--system .wpbc-aic-bubble,
.wpbc-aic-msg--system {
	font-size: .875em;
	color: var(--wpbc-aic-text-muted);
	font-style: italic;
	text-align: center;
	width: 100%;
	justify-content: center;
}

/* Timestamp */
.wpbc-aic-ts {
	display: block;
	font-size: .7em;
	opacity: .65;
	margin-top: .3em;
	text-align: right;
}

.wpbc-aic-msg--assistant .wpbc-aic-ts {
	text-align: left;
}

/* ============================================================
   Avatar (assistant messages only, shown when configured)
   ============================================================ */
.wpbc-aic-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	align-self: flex-end;
	margin-right: .45em;
}

/* ============================================================
   Typing indicator
   ============================================================ */
.wpbc-aic-dots {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	height: 1.1em;
}

.wpbc-aic-dots span {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wpbc-aic-text-muted);
	animation: wpbc-aic-bounce .9s ease-in-out infinite;
}

.wpbc-aic-dots span:nth-child(2) { animation-delay: .15s; }
.wpbc-aic-dots span:nth-child(3) { animation-delay: .30s; }

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

/* ============================================================
   Input area
   ============================================================ */
.wpbc-aic-input-area {
	display: flex;
	align-items: flex-end;
	gap: .5em;
	padding: .6em .75em;
	border-top: 1px solid var(--wpbc-aic-border);
	background: var(--wpbc-aic-bg);
}

.wpbc-aic-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--wpbc-aic-border);
	border-radius: 20px;
	padding: .5em .9em;
	font-family: var(--wpbc-aic-font);
	font-size: .95em;
	line-height: 1.4;
	min-height: 38px;
	max-height: 140px;
	overflow-y: auto;
	transition: border-color .15s;
	outline: none;
}

.wpbc-aic-input:focus {
	border-color: var(--wpbc-aic-primary);
}

.wpbc-aic-send {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: var(--wpbc-aic-primary);
	color: #fff;
	font-size: 1.1em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}

.wpbc-aic-send:hover {
	background: var(--wpbc-aic-primary-dark);
}

.wpbc-aic-send:disabled,
.wpbc-aic-input:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* ============================================================
   Markdown elements inside assistant bubbles
   ============================================================ */
.wpbc-aic-bubble p          { margin: 0 0 .5em; }
.wpbc-aic-bubble p:last-child { margin-bottom: 0; }
.wpbc-aic-bubble h1,
.wpbc-aic-bubble h2,
.wpbc-aic-bubble h3         { margin: .6em 0 .3em; font-size: 1em; font-weight: 700; }
.wpbc-aic-bubble h1         { font-size: 1.1em; }
.wpbc-aic-bubble ul,
.wpbc-aic-bubble ol         { margin: .4em 0 .4em 1.2em; padding: 0; }
.wpbc-aic-bubble li         { margin-bottom: .2em; }
.wpbc-aic-bubble code       { background: rgba(0,0,0,.08); border-radius: 3px; padding: .1em .35em; font-size: .88em; font-family: monospace; }
.wpbc-aic-bubble pre        { background: rgba(0,0,0,.08); border-radius: 6px; padding: .6em .8em; overflow-x: auto; margin: .4em 0; }
.wpbc-aic-bubble pre code   { background: none; padding: 0; font-size: .85em; }
.wpbc-aic-bubble a          { color: inherit; text-decoration: underline; }
.wpbc-aic-bubble table      { border-collapse: collapse; width: 100%; margin: .4em 0; font-size: .9em; }
.wpbc-aic-bubble th,
.wpbc-aic-bubble td         { border: 1px solid rgba(0,0,0,.15); padding: .3em .6em; }
.wpbc-aic-bubble th         { background: rgba(0,0,0,.06); font-weight: 700; }
.wpbc-aic-bubble strong     { font-weight: 700; }
.wpbc-aic-bubble em         { font-style: italic; }

/* ============================================================
   Character counter
   ============================================================ */
.wpbc-aic-char-count {
	font-size: .75em;
	color: var(--wpbc-aic-text-muted);
	text-align: right;
	padding: 0 .75em .4em;
}

/* ============================================================
   Footer
   ============================================================ */
.wpbc-aic-footer {
	text-align: center;
	padding: .3em;
	font-size: .7em;
	color: var(--wpbc-aic-text-muted);
	border-top: 1px solid var(--wpbc-aic-border);
}