/* OSSS Shopping Assistant - all rules scoped under .osss-ca so the theme cannot restyle them. */
.osss-ca, .osss-ca * { box-sizing: border-box; }

.osss-ca {
	--c: var(--osss-ca-color, #0b5ed7);
	position: fixed;
	bottom: calc(var(--osss-ca-bottom, 20px) + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #1d2327;
}
.osss-ca[data-pos="right"] { right: 20px; }
.osss-ca[data-pos="left"]  { left: 20px; }

.osss-ca button, .osss-ca input, .osss-ca textarea, .osss-ca a { font-family: inherit; }

/* Launcher */
.osss-ca .osss-ca-launcher {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0; padding: 12px 18px;
	background: var(--c); color: #fff;
	border: 0; border-radius: 999px; cursor: pointer;
	font-size: 15px; font-weight: 600; line-height: 1;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	text-transform: none; letter-spacing: 0;
}
.osss-ca .osss-ca-launcher:hover, .osss-ca .osss-ca-launcher:focus-visible { filter: brightness(1.1); outline: 2px solid #fff; outline-offset: -4px; }
.osss-ca.is-open .osss-ca-launcher { display: none; }

/* Panel */
.osss-ca .osss-ca-panel {
	display: flex; flex-direction: column;
	width: 390px; max-width: calc(100vw - 24px);
	height: 620px; max-height: calc(100vh - 40px - var(--osss-ca-bottom, 20px));
	background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.osss-ca .osss-ca-panel[hidden] { display: none; }

.osss-ca .osss-ca-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 14px; background: var(--c); color: #fff;
}
.osss-ca .osss-ca-headtext { display: flex; flex-direction: column; min-width: 0; }
.osss-ca .osss-ca-headtext strong { font-size: 15px; line-height: 1.2; color: #fff; }
.osss-ca .osss-ca-headtext small { font-size: 12px; opacity: .9; color: #fff; }
.osss-ca .osss-ca-close {
	margin: 0; padding: 0 8px; background: transparent; color: #fff; border: 0; cursor: pointer;
	font-size: 26px; line-height: 1; border-radius: 6px;
}
.osss-ca .osss-ca-close:hover, .osss-ca .osss-ca-close:focus-visible { background: rgba(255, 255, 255, .2); }

.osss-ca .osss-ca-nav { display: flex; gap: 6px; padding: 8px 10px; background: #f6f7f7; border-bottom: 1px solid #e2e4e7; }
.osss-ca .osss-ca-navbtn {
	margin: 0; padding: 5px 10px; background: #fff; color: #1d2327;
	border: 1px solid #d0d5db; border-radius: 999px; cursor: pointer; font-size: 12px; line-height: 1.2;
	text-transform: none; letter-spacing: 0;
}
.osss-ca .osss-ca-navbtn:hover { border-color: var(--c); color: var(--c); }
.osss-ca .osss-ca-navbtn:last-child { margin-left: auto; }

/* Conversation */
.osss-ca .osss-ca-log { flex: 1; overflow-y: auto; padding: 12px; background: #fff; scroll-behavior: smooth; position: relative; }
.osss-ca .osss-ca-msg { margin: 0 0 8px; display: flex; }
.osss-ca .osss-ca-m-user { justify-content: flex-end; }
.osss-ca .osss-ca-bubble {
	max-width: 88%; padding: 9px 12px; border-radius: 14px;
	background: #eef1f4; color: #1d2327; white-space: pre-wrap; overflow-wrap: anywhere;
}
.osss-ca .osss-ca-m-user .osss-ca-bubble { background: var(--c); color: #fff; border-bottom-right-radius: 4px; }
.osss-ca .osss-ca-m-bot .osss-ca-bubble { border-bottom-left-radius: 4px; }

.osss-ca .osss-ca-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.osss-ca .osss-ca-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8c939b; animation: osss-ca-bounce 1s infinite ease-in-out; }
.osss-ca .osss-ca-typing span:nth-child(2) { animation-delay: .15s; }
.osss-ca .osss-ca-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes osss-ca-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* Buttons in the conversation */
.osss-ca .osss-ca-choices { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.osss-ca .osss-ca-choice {
	display: inline-block; margin: 0; padding: 8px 13px;
	background: #fff; color: var(--c); text-decoration: none; text-align: left;
	border: 1.5px solid var(--c); border-radius: 999px; cursor: pointer;
	font-size: 13px; font-weight: 600; line-height: 1.25; text-transform: none; letter-spacing: 0;
}
.osss-ca .osss-ca-choice:hover, .osss-ca .osss-ca-choice:focus-visible { background: var(--c); color: #fff; }
.osss-ca .osss-ca-choice.is-primary { background: var(--c); color: #fff; }
.osss-ca .osss-ca-choice.is-primary:hover { filter: brightness(1.1); }
.osss-ca .osss-ca-choice.is-secondary { border-color: #c3c8ce; color: #3c434a; font-weight: 500; }
.osss-ca .osss-ca-choice.is-secondary:hover { background: #3c434a; border-color: #3c434a; color: #fff; }
.osss-ca .osss-ca-choices.is-done { opacity: .45; }
.osss-ca .osss-ca-choices.is-done .osss-ca-choice { cursor: default; pointer-events: none; }

/* Product cards */
.osss-ca .osss-ca-cards { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.osss-ca .osss-ca-card { display: flex; gap: 10px; padding: 10px; border: 1px solid #e2e4e7; border-radius: 10px; background: #fff; }
.osss-ca .osss-ca-img { flex: 0 0 64px; width: 64px; height: 64px; display: block; }
.osss-ca .osss-ca-img img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #f6f7f7; display: block; }
.osss-ca .osss-ca-cbody { flex: 1; min-width: 0; }
.osss-ca .osss-ca-ctitle { display: block; font-weight: 600; font-size: 13px; color: #1d2327; text-decoration: none; overflow-wrap: anywhere; }
.osss-ca .osss-ca-ctitle:hover { color: var(--c); text-decoration: underline; }
.osss-ca .osss-ca-cmeta { margin-top: 2px; font-size: 12px; color: #646970; }
.osss-ca .osss-ca-price { margin-top: 3px; font-weight: 700; color: #1d2327; }
.osss-ca .osss-ca-price.is-quote { font-weight: 500; font-size: 12px; color: #646970; }
.osss-ca .osss-ca-cactions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.osss-ca .osss-ca-mini {
	display: inline-block; margin: 0; padding: 5px 10px; background: #fff; color: var(--c);
	border: 1px solid var(--c); border-radius: 6px; cursor: pointer; text-decoration: none;
	font-size: 12px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0;
}
.osss-ca .osss-ca-mini:hover { background: var(--c); color: #fff; }
.osss-ca .osss-ca-mini.is-link { background: var(--c); color: #fff; }
.osss-ca .osss-ca-vars { margin-top: 6px; border-top: 1px dashed #e2e4e7; }
.osss-ca .osss-ca-var { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px dashed #e2e4e7; font-size: 12px; }
.osss-ca .osss-ca-vinfo { min-width: 0; overflow-wrap: anywhere; }
.osss-ca .osss-ca-vinfo a { color: #1d2327; font-weight: 600; text-decoration: none; }
.osss-ca .osss-ca-vinfo a:hover { color: var(--c); text-decoration: underline; }

/* Quote form */
.osss-ca .osss-ca-form { width: 100%; padding: 10px; border: 1px solid #e2e4e7; border-radius: 10px; background: #fafbfc; }
.osss-ca .osss-ca-field { display: block; margin: 0 0 8px; }
.osss-ca .osss-ca-field span { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; color: #3c434a; }
.osss-ca .osss-ca-form input[type="text"],
.osss-ca .osss-ca-form input[type="email"],
.osss-ca .osss-ca-form input[type="tel"],
.osss-ca .osss-ca-form textarea {
	display: block; width: 100%; margin: 0; padding: 8px 10px; height: auto;
	border: 1px solid #c3c8ce; border-radius: 6px; background: #fff; color: #1d2327;
	font-size: 14px; line-height: 1.3; box-shadow: none;
}
.osss-ca .osss-ca-form textarea { resize: vertical; }
.osss-ca .osss-ca-form input:focus, .osss-ca .osss-ca-form textarea:focus { outline: 2px solid var(--c); outline-offset: 0; border-color: var(--c); }
.osss-ca .osss-ca-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.osss-ca .osss-ca-status { min-height: 18px; margin: 2px 0 6px; font-size: 12px; color: #b32d2e; }
.osss-ca .osss-ca-qitems { margin-bottom: 8px; }
.osss-ca .osss-ca-qrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #e8eaed; }
.osss-ca .osss-ca-qty { width: 58px !important; padding: 5px 6px !important; text-align: center; }
.osss-ca .osss-ca-qname { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.osss-ca .osss-ca-x { margin: 0; padding: 0 6px; background: transparent; border: 0; color: #646970; font-size: 20px; line-height: 1; cursor: pointer; }
.osss-ca .osss-ca-x:hover { color: #b32d2e; }

/* Composer */
.osss-ca .osss-ca-composer { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #e2e4e7; background: #fff; margin: 0; }
.osss-ca .osss-ca-input {
	flex: 1; min-width: 0; margin: 0; height: 40px; padding: 0 12px;
	border: 1px solid #c3c8ce; border-radius: 999px; background: #fff; color: #1d2327; font-size: 14px; box-shadow: none;
}
.osss-ca .osss-ca-input:focus { outline: 2px solid var(--c); outline-offset: 0; border-color: var(--c); }
.osss-ca .osss-ca-send {
	margin: 0; padding: 0 16px; height: 40px; background: var(--c); color: #fff; border: 0; border-radius: 999px;
	cursor: pointer; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.osss-ca .osss-ca-send:hover { filter: brightness(1.1); }

/* Phones: full-screen panel */
@media (max-width: 600px) {
	.osss-ca[data-pos="right"], .osss-ca[data-pos="left"] { right: 12px; left: auto; }
	.osss-ca[data-pos="left"] { left: 12px; right: auto; }
	.osss-ca.is-open { inset: 0; right: 0; left: 0; bottom: 0; }
	.osss-ca.is-open .osss-ca-panel { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
	.osss-ca .osss-ca-input, .osss-ca .osss-ca-form input, .osss-ca .osss-ca-form textarea { font-size: 16px; } /* stops iOS zoom */
}

@media (prefers-reduced-motion: reduce) {
	.osss-ca .osss-ca-log { scroll-behavior: auto; }
	.osss-ca .osss-ca-typing span { animation: none; }
}