/* =========================================================
   Oba AI Assistant — frontend widget (variable-driven theme)
   Core colours (--oba-primary/dark/accent) and optional
   overrides (--oba-user-bubble, --oba-bot-bubble, --oba-bot-text,
   --oba-chat-bg, --oba-header-bg) are set on #oba-ai-root inline.
   ========================================================= */

.oba-ai, .oba-ai * { box-sizing: border-box; }

.oba-ai {
	--oba-primary: #FF6B1A;
	--oba-dark: #14110F;
	--oba-accent: #FFB07C;

	/* Surfaces (light defaults; dark theme overrides the vars) */
	--oba-bg: #ffffff;
	--oba-surface: #f6f4f2;
	--oba-text: #1d1a17;
	--oba-muted: #8a827b;
	--oba-border: rgba(20,17,15,.08);
	--oba-shadow: 0 24px 60px -12px rgba(20,17,15,.32), 0 8px 20px -8px rgba(20,17,15,.2);

	/* Overridable component colours */
	--oba-chat-bg: var(--oba-surface);
	--oba-bot-bubble: #ffffff;
	--oba-bot-text: var(--oba-text);
	--oba-user-bubble: linear-gradient(135deg, var(--oba-primary), color-mix(in srgb, var(--oba-primary) 70%, #d2480f));
	--oba-header-bg: radial-gradient(120% 140% at 85% -10%, color-mix(in srgb, var(--oba-accent) 60%, transparent), transparent 60%), linear-gradient(135deg, var(--oba-primary), color-mix(in srgb, var(--oba-dark) 88%, var(--oba-primary)) 130%);
	--oba-input-bg: var(--oba-surface);
	--oba-composer-bg: var(--oba-bg);

	--oba-radius: 20px;
	position: fixed;
	bottom: 22px;
	z-index: 2147483000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}
.oba-ai.oba-pos-right { right: 22px; }
.oba-ai.oba-pos-left  { left: 22px; }

/* ---------- Dark theme ---------- */
.oba-ai.oba-theme-dark {
	--oba-bg: #1a1613;
	--oba-surface: #221d18;
	--oba-text: #f4ede4;
	--oba-muted: #9a8f84;
	--oba-border: rgba(255,255,255,.08);
	--oba-shadow: 0 24px 60px -12px rgba(0,0,0,.6), 0 8px 20px -8px rgba(0,0,0,.5);
	--oba-chat-bg: #221d18;
	--oba-bot-bubble: #2b251f;
	--oba-input-bg: #221d18;
	--oba-composer-bg: #1a1613;
}

/* ---------- Launcher ---------- */
.oba-launcher {
	position: relative; width: 64px; height: 64px;
	border: none; border-radius: 50%; cursor: pointer; color: #fff;
	background: radial-gradient(120% 120% at 30% 20%, var(--oba-accent), var(--oba-primary) 55%, color-mix(in srgb, var(--oba-primary) 70%, #000) 100%);
	box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--oba-primary) 65%, transparent), 0 6px 14px rgba(0,0,0,.18);
	display: grid; place-items: center;
	transform: translateY(140px) scale(.6); opacity: 0;
	transition: transform .55s cubic-bezier(.18,.9,.3,1.3), opacity .4s ease, box-shadow .3s ease;
}
.oba-ai.oba-in .oba-launcher { transform: translateY(0) scale(1); opacity: 1; }
.oba-launcher:hover { transform: translateY(-2px) scale(1.04); }
.oba-launcher:active { transform: scale(.96); }
.oba-launcher__icon { width: 30px; height: 30px; position: absolute; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.oba-launcher__close { transform: rotate(-90deg) scale(.4); opacity: 0; }
.oba-ai.oba-open .oba-launcher__chat  { transform: rotate(90deg) scale(.4); opacity: 0; }
.oba-ai.oba-open .oba-launcher__close { transform: rotate(0) scale(1); opacity: 1; }
.oba-launcher__pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--oba-primary); opacity: .55; z-index: -1; animation: oba-pulse 2.6s ease-out infinite; }
.oba-ai.oba-open .oba-launcher__pulse { animation: none; opacity: 0; }
@keyframes oba-pulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Teaser ---------- */
.oba-teaser {
	position: absolute; bottom: 78px; width: max-content; max-width: 260px;
	background: var(--oba-bot-bubble); color: var(--oba-text);
	padding: 12px 38px 12px 16px; border-radius: 16px; box-shadow: var(--oba-shadow);
	font-size: 14px; font-weight: 500; cursor: pointer;
	opacity: 0; transform: translateY(10px) scale(.92);
	transition: opacity .4s ease, transform .4s cubic-bezier(.18,.9,.3,1.3); pointer-events: none;
}
.oba-pos-right .oba-teaser { right: 4px; }
.oba-pos-left  .oba-teaser { left: 4px; }
.oba-ai.oba-teasing .oba-teaser { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.oba-teaser::after { content: ""; position: absolute; bottom: -6px; width: 14px; height: 14px; background: var(--oba-bot-bubble); transform: rotate(45deg); box-shadow: 3px 3px 6px rgba(0,0,0,.08); }
.oba-pos-right .oba-teaser::after { right: 26px; }
.oba-pos-left  .oba-teaser::after { left: 26px; }
.oba-teaser__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; margin-right: 7px; animation: oba-dot 1.8s infinite; }
@keyframes oba-dot { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.5);} 70% { box-shadow: 0 0 0 6px rgba(46,204,113,0);} 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0);} }
.oba-teaser__x { position: absolute; top: 6px; right: 8px; border: none; background: none; font-size: 16px; line-height: 1; color: var(--oba-muted); cursor: pointer; padding: 2px; }

/* ---------- Window ---------- */
.oba-window {
	position: absolute; bottom: 80px; width: 380px; max-width: calc(100vw - 32px);
	height: 600px; max-height: calc(100vh - 120px);
	background: var(--oba-bg); border-radius: var(--oba-radius); box-shadow: var(--oba-shadow);
	display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right;
	opacity: 0; transform: translateY(24px) scale(.92); pointer-events: none;
	transition: opacity .35s ease, transform .45s cubic-bezier(.18,.9,.3,1.25);
}
.oba-pos-right .oba-window { right: 0; left: auto; }
.oba-pos-left  .oba-window { left: 0; right: auto; transform-origin: bottom left; }
.oba-ai.oba-open .oba-window { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ---------- Header ---------- */
.oba-header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 18px; color: #fff; background: var(--oba-header-bg); position: relative; }
.oba-header::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: rgba(255,255,255,.15); }
.oba-header__avatar { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.18); font-weight: 700; font-size: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.oba-header__status { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; border: 2px solid color-mix(in srgb, var(--oba-primary) 80%, #000); }
.oba-header__meta { display: flex; flex-direction: column; line-height: 1.25; }
.oba-header__meta strong { font-size: 16px; font-weight: 700; }
.oba-header__meta span { font-size: 12.5px; opacity: .85; }
.oba-header__btn { margin-left: auto; background: rgba(255,255,255,.14); border: none; width: 34px; height: 34px; border-radius: 10px; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; }
.oba-header__btn:hover { background: rgba(255,255,255,.28); }
.oba-header__btn svg { width: 20px; height: 20px; }

/* ---------- Messages ---------- */
.oba-messages {
	flex: 1; overflow-y: auto; padding: 18px 16px 8px;
	background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--oba-primary) 9%, transparent), transparent 70%), var(--oba-chat-bg);
	display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth;
}
.oba-messages::-webkit-scrollbar { width: 7px; }
.oba-messages::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--oba-muted) 40%, transparent); border-radius: 10px; }
.oba-theme-dark .oba-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

.oba-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; animation: oba-rise .4s cubic-bezier(.18,.9,.3,1.2) both; word-wrap: break-word; }
@keyframes oba-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.oba-msg--bot { align-self: flex-start; background: var(--oba-bot-bubble); color: var(--oba-bot-text); border-bottom-left-radius: 5px; border: 1px solid var(--oba-border); box-shadow: 0 2px 10px rgba(20,17,15,.05); }
.oba-msg--user { align-self: flex-end; color: #fff; background: var(--oba-user-bubble); border-bottom-right-radius: 5px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--oba-primary) 60%, transparent); }

/* Rich text */
.oba-msg strong { font-weight: 700; }
.oba-msg ul { margin: 6px 0 0; padding-left: 18px; }
.oba-msg li { margin: 2px 0; }
.oba-msg a { color: var(--oba-primary); text-decoration: underline; font-weight: 600; }
.oba-theme-dark .oba-msg--bot a { color: var(--oba-accent); }

/* Typing */
.oba-typing { align-self: flex-start; background: var(--oba-bot-bubble); padding: 14px 16px; border-radius: 16px; border-bottom-left-radius: 5px; border: 1px solid var(--oba-border); display: inline-flex; gap: 5px; }
.oba-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--oba-muted); opacity: .5; animation: oba-bounce 1.2s infinite; }
.oba-theme-dark .oba-typing span { background: var(--oba-accent); }
.oba-typing span:nth-child(2) { animation-delay: .15s; }
.oba-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes oba-bounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Quick replies ---------- */
.oba-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; background: var(--oba-chat-bg); }
.oba-quick:not(:empty) { padding-top: 4px; padding-bottom: 12px; }
.oba-chip { border: 1px solid color-mix(in srgb, var(--oba-primary) 35%, transparent); background: var(--oba-bg); color: color-mix(in srgb, var(--oba-primary) 85%, #000); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease; animation: oba-rise .4s both; }
.oba-chip:hover { background: var(--oba-primary); color: #fff; transform: translateY(-1px); }
.oba-chip .oba-chip__i { margin-right: 5px; }
.oba-theme-dark .oba-chip { background: #2b251f; color: var(--oba-accent); }
.oba-theme-dark .oba-chip:hover { background: var(--oba-primary); color: #fff; }

/* ---------- Composer ---------- */
.oba-form { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; background: var(--oba-composer-bg); border-top: 1px solid var(--oba-border); }
.oba-input { flex: 1; border: 1.5px solid color-mix(in srgb, var(--oba-muted) 28%, transparent); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; font-family: inherit; color: var(--oba-text); outline: none; transition: border-color .2s ease, box-shadow .2s ease; background: var(--oba-input-bg); }
.oba-input::placeholder { color: var(--oba-muted); }
.oba-input:focus { border-color: var(--oba-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oba-primary) 18%, transparent); }
.oba-send { flex: none; width: 46px; height: 46px; border: none; border-radius: 14px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--oba-primary), color-mix(in srgb, var(--oba-primary) 65%, #b53c08)); display: grid; place-items: center; transition: transform .15s ease, filter .2s ease; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--oba-primary) 65%, transparent); }
.oba-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.oba-send:active { transform: scale(.94); }
.oba-send svg { width: 20px; height: 20px; }
.oba-send:disabled { opacity: .5; cursor: default; transform: none; }
.oba-foot { text-align: center; font-size: 11px; color: var(--oba-muted); padding: 4px 0 10px; background: var(--oba-composer-bg); letter-spacing: .02em; }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.oba-ai { bottom: 16px; }
	.oba-ai.oba-pos-right { right: 16px; }
	.oba-ai.oba-pos-left  { left: 16px; }
	.oba-pos-right .oba-window, .oba-pos-left .oba-window {
		width: 100vw; height: 100dvh; max-height: 100dvh; bottom: -16px; border-radius: 0;
		position: fixed; left: 0; right: 0;
	}
}
@media (prefers-reduced-motion: reduce) { .oba-ai *, .oba-launcher { transition: none !important; animation: none !important; } }

/* Header avatar photo */
.oba-header__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }