/* ============================================================
   BachassurAI — Widget (faithful port of the approved prototype
   "Resources/voice chat widget", scoped for use inside a live site:
   no global reset, no body styles, no mock page).
   ============================================================ */

#bachassur-widget-root {
	--wg-width: 384px;
	--wg-height: 620px;
	--radius-lg: 26px;

	--ink: #111827;
	--ink-soft: #4b5563;
	--ink-mute: #9ca3af;
	--line: #ececef;
	--surface: #ffffff;
	--surface-2: #f4f4f6;

	--black: #0c0d0f;

	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--shadow-widget: 0 24px 60px -12px rgba(17, 24, 39, 0.22), 0 0 0 1px rgba(17, 24, 39, 0.04);
	--shadow-soft: 0 6px 18px rgba(17, 24, 39, 0.10);
}

#bachassur-widget-root, #bachassur-widget-root * { box-sizing: border-box; }

/* ---- Launcher (closed) ---- */
#bachassur-widget-root .launcher {
	position: fixed; bottom: 24px; right: 24px; z-index: 100000;
	display: flex; align-items: center; gap: 11px;
	height: 60px; padding: 0 22px 0 10px;
	border: none; border-radius: 40px; cursor: pointer;
	background: var(--black); color: #fff;
	box-shadow: 0 12px 30px rgba(12, 13, 15, 0.32);
	font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
	transition: transform .35s var(--spring), opacity .25s var(--ease), box-shadow .25s var(--ease);
}
.launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(12, 13, 15, 0.4); }
.launcher:active { transform: translateY(0) scale(.98); }
.launcher.is-hidden { opacity: 0; transform: scale(.6) translateY(16px); pointer-events: none; }

.launcher-orb { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative; box-shadow: inset 0 0 8px rgba(255,255,255,.35); }
.launcher-orb-gradient {
	position: absolute; inset: -25%;
	background: conic-gradient(from 180deg at 50% 50%, #2dd4bf, #3b82f6 90deg, #a3e635 180deg, #facc15 270deg, #2dd4bf);
	filter: blur(7px); animation: ba-spin 7s linear infinite;
}
.launcher-label { white-space: nowrap; }

/* ---- Widget shell ---- */
#bachassur-widget-root .widget {
	position: fixed; bottom: 24px; right: 24px; z-index: 100001;
	width: var(--wg-width); height: var(--wg-height);
	max-height: calc(100vh - 48px);
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-widget);
	display: flex; flex-direction: column; overflow: hidden;
	transform-origin: bottom right;
	color: var(--ink); font-family: var(--font);
	transition: transform .5s var(--ease-out), opacity .35s var(--ease);
}
.widget.is-hidden { opacity: 0; transform: scale(.92) translateY(18px); pointer-events: none; }

/* ---- Header ---- */
.wg-header {
	position: relative; z-index: 30;
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px; height: 68px; flex-shrink: 0;
}
.wg-header-left { display: flex; align-items: center; gap: 10px; transition: opacity .3s var(--ease), transform .35s var(--ease); }
.widget.chat-mode .wg-header-left { opacity: 0; transform: translateX(14px); pointer-events: none; }

.chip-btn {
	width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
	background: var(--surface-2); border: none; color: var(--ink-soft);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.chip-btn:hover { background: #e9e9ee; color: var(--ink); }
.chip-btn:active { transform: scale(.92); }

.lang-btn {
	position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
	display: flex; align-items: center; gap: 7px;
	height: 38px; padding: 0 13px; border-radius: 22px;
	background: #fff; border: 1px solid var(--line); color: #374151;
	font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
	box-shadow: 0 1px 2px rgba(17,24,39,.04);
	transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lang-btn:hover { background: var(--surface-2); }
.lang-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg,#3b82f6,#2dd4bf); }

/* ---- Orb (shared, morphs between views) ---- */
.orb {
	position: absolute; top: 128px; left: 50%; transform: translateX(-50%);
	width: 168px; height: 168px; border-radius: 50%;
	border: none; background: none; padding: 0; cursor: pointer; z-index: 20;
	transition: top .55s var(--ease-out), left .55s var(--ease-out),
				width .55s var(--ease-out), height .55s var(--ease-out),
				transform .55s var(--ease-out);
}
.orb-glow {
	position: absolute; inset: -14%; border-radius: 50%;
	background: conic-gradient(from 180deg at 50% 50%, #2dd4bf, #3b82f6 90deg, #a3e635 180deg, #facc15 270deg, #2dd4bf);
	filter: blur(26px); opacity: .45; animation: ba-spin 9s linear infinite;
	transition: opacity .5s var(--ease);
}
.orb-disc {
	position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
	isolation: isolate;
	box-shadow: inset 0 0 18px rgba(255,255,255,.4), 0 8px 24px rgba(17,24,39,.12);
	transform: scale(calc(1 + (var(--amp, 0) * 0.10)));
	will-change: transform, border-radius;
}
.orb-gradient {
	position: absolute; inset: -10%; border-radius: 50%;
	background: conic-gradient(from 180deg at 50% 50%, #2dd4bf, #3b82f6 90deg, #a3e635 180deg, #facc15 270deg, #2dd4bf);
	filter: blur(15px); animation: ba-spin 8s linear infinite;
}
.orb-disc::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	mix-blend-mode: overlay; opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 150px 150px;
}
.widget.is-active .orb-disc::after { opacity: .62; animation: ba-grainShift .5s steps(3) infinite; }
@keyframes ba-grainShift {
	0% { background-position: 0 0; }
	33% { background-position: -40px 30px; }
	66% { background-position: 25px -35px; }
	100% { background-position: 0 0; }
}

.orb-center {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1);
	width: 56px; height: 56px; border-radius: 50%;
	color: var(--ink);
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.55);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 6px 18px rgba(17,24,39,.18), inset 0 1px 1px rgba(255,255,255,.65);
	transition: transform .4s var(--spring), opacity .3s var(--ease);
}
.orb-end, .orb-back { opacity: 0; transform: translate(-50%,-50%) scale(.5); pointer-events: none; }
.orb:hover .orb-center { transform: translate(-50%,-50%) scale(1.07); }
.orb:active .orb-center { transform: translate(-50%,-50%) scale(.95); }

.widget.is-active .orb-glow { opacity: .85; animation-duration: 14s; }
.widget.is-active .orb-gradient { animation-duration: 16s; filter: blur(13px) saturate(1.55); }
.widget.is-active .orb-disc { animation: ba-blobMorph 5.5s ease-in-out infinite; }
.widget.is-active:not(.chat-mode) .js-orb-start { opacity: 0; transform: translate(-50%,-50%) scale(.5); pointer-events: none; }
.widget.is-active:not(.chat-mode) .orb-end { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: none; }

.widget.chat-mode .orb { top: 15px; left: 15px; transform: translateX(0); width: 46px; height: 46px; cursor: pointer; z-index: 40; }
.widget.chat-mode .orb-glow { opacity: 0; }
.widget.chat-mode .orb-gradient { filter: blur(5px); animation-duration: 6s; }
.widget.chat-mode .orb-disc { animation: none; }
.widget.chat-mode .js-orb-start { opacity: 0; transform: translate(-50%,-50%) scale(.4); pointer-events: none; }
.widget.chat-mode .orb-back { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: none; width: 22px; height: 22px; box-shadow: 0 2px 6px rgba(17,24,39,.22); }

@keyframes ba-spin { to { transform: rotate(360deg); } }
@keyframes ba-blobMorph {
	0%,100% { border-radius: 42% 58% 56% 44% / 56% 42% 58% 44%; transform: scale(calc(1 + (var(--amp,0) * .14))); }
	25%     { border-radius: 64% 36% 38% 62% / 40% 64% 36% 60%; transform: scale(calc(1 + (var(--amp,0) * .14))); }
	50%     { border-radius: 38% 62% 66% 34% / 63% 38% 62% 37%; transform: scale(calc(1 + (var(--amp,0) * .14))); }
	75%     { border-radius: 60% 40% 36% 64% / 42% 60% 40% 58%; transform: scale(calc(1 + (var(--amp,0) * .14))); }
}

/* ---- Body ---- */
.wg-body { position: relative; flex: 1; min-height: 0; }

.voice-view {
	position: absolute; left: 0; right: 0; top: 322px; padding: 0 38px; text-align: center;
	transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.widget.chat-mode .voice-view { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.status-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }

.listening-dots { display: none; justify-content: center; gap: 6px; margin-top: 14px; }
.widget.is-active:not(.chat-mode) .listening-dots { display: flex; }
.listening-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c2c6cd; animation: ba-blink 1.3s var(--ease) infinite; }
.listening-dots i:nth-child(2) { animation-delay: .18s; }
.listening-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ba-blink { 0%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.chat-view {
	position: absolute; inset: 0; padding: 4px 18px 0;
	display: flex; flex-direction: column;
	opacity: 0; pointer-events: none; transform: translateY(20px);
	transition: opacity .4s var(--ease) .05s, transform .4s var(--ease-out) .05s;
}
.widget.chat-mode .chat-view { opacity: 1; pointer-events: auto; transform: translateY(0); }

.chat-history { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 8px 4px 16px; }
.chat-history::-webkit-scrollbar { width: 5px; }
.chat-history::-webkit-scrollbar-thumb { background: #dcdfe4; border-radius: 4px; }

.msg { display: flex; animation: ba-rise .32s var(--ease-out) both; }
.msg.agent { justify-content: flex-start; }
.msg.user { justify-content: flex-end; }
@keyframes ba-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

.bubble { max-width: 84%; padding: 12px 16px; font-size: 14.5px; line-height: 1.45; word-wrap: break-word; }
.bubble.is-rtl { direction: rtl; text-align: right; }
.msg.agent .bubble { background: var(--surface-2); color: var(--ink); border-radius: 20px 20px 20px 6px; }
.msg.user .bubble { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(17,24,39,.05); border-radius: 20px 20px 6px 20px; }

.bubble.typing { display: inline-flex; gap: 5px; padding: 15px 16px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: #b6bbc3; animation: ba-blink 1.3s var(--ease) infinite; }
.bubble.typing i:nth-child(2){ animation-delay:.18s; }
.bubble.typing i:nth-child(3){ animation-delay:.36s; }

/* ---- Footer ---- */
.wg-footer { position: relative; z-index: 30; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px 18px 20px; background: var(--surface); }
.input-pill { position: relative; flex: 1; display: flex; align-items: center; }
.input-pill input {
	width: 100%; height: 50px; padding: 0 46px 0 20px;
	border: 1px solid #e0e2e7; border-radius: 26px; background: #fff;
	font-family: var(--font); font-size: 15px; color: var(--ink); outline: none;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input-pill input::placeholder { color: var(--ink-mute); }
.input-pill input:focus { border-color: #c7cbd2; box-shadow: 0 0 0 4px rgba(244,244,246,.9); }

.send-btn {
	position: absolute; right: 7px; width: 38px; height: 38px; border-radius: 50%;
	border: none; background: transparent; color: var(--ink-mute);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--spring);
}
.send-btn.is-ready { color: #fff; background: var(--black); }
.send-btn.is-ready:hover { transform: scale(1.06); }
.send-btn:not(.is-ready) { cursor: default; }

.endcall-btn {
	width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%;
	color: var(--ink);
	background: rgba(255,255,255,.55);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
	border: 1px solid rgba(0,0,0,.06);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 6px 16px rgba(17,24,39,.16), inset 0 1px 1px rgba(255,255,255,.65);
	opacity: 0; width: 0; transform: scale(.4); margin-left: -10px; pointer-events: none;
	transition: opacity .3s var(--ease), transform .35s var(--spring), width .35s var(--ease), margin .35s var(--ease), background .2s var(--ease);
}
.widget.is-active.chat-mode .endcall-btn { opacity: 1; width: 50px; transform: scale(1); margin-left: 0; pointer-events: auto; }
.endcall-btn:hover { background: rgba(255,255,255,.8); }
.endcall-btn:active { transform: scale(.93); }

/* ---- Consent layer (added on top of the prototype) ---- */
.wg-consent { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wg-consent[hidden] { display: none; }
.wg-consent-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); padding: 22px; max-width: 300px; text-align: center; }
.wg-consent-box p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; }
.wg-consent-actions { display: flex; gap: 10px; }
.wg-consent-yes, .wg-consent-no { flex: 1; height: 44px; border-radius: 24px; border: none; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500; }
.wg-consent-yes { background: var(--black); color: #fff; }
.wg-consent-no { background: var(--surface-2); color: var(--ink); }

/* ---- Darija text direction: keep the shell fixed, only adapt text controls ---- */
#bachassur-widget-root[data-lang="ar"] .input-pill input {
	direction: rtl; text-align: right;
	padding: 0 20px 0 46px;
}
#bachassur-widget-root[data-lang="ar"] .send-btn { right: auto; left: 7px; }
#bachassur-widget-root[data-lang="ar"] .send-btn svg { transform: scaleX(-1); }
#bachassur-widget-root[data-lang="ar"] .status-text,
#bachassur-widget-root[data-lang="ar"] .wg-consent-box p {
	direction: rtl; text-align: right;
}

/* ---- Responsive ---- */
@media (max-width: 460px) {
	#bachassur-widget-root .widget { right: 0; bottom: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 20px 20px 0 0; }
	#bachassur-widget-root .launcher { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.orb-glow, .orb-gradient, .launcher-orb-gradient, .listening-dots i, .bubble.typing i, .widget.is-active .orb-disc { animation: none !important; }
	#bachassur-widget-root * { transition-duration: .12s !important; }
}

#bachassur-widget-root :focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* ---- Page-side feedback for AI actions (target host-page elements, so NOT scoped to the widget root) ---- */
.ba-focus { outline: 3px solid #2dd4bf; outline-offset: 4px; transition: outline .2s; }
.ba-filled { background: #ecfdf5 !important; transition: background .3s; }
[data-plan].ba-recommended { box-shadow: 0 0 0 3px #2dd4bf inset; }