#upcl-root, #upcl-root * { box-sizing: border-box; }
#upcl-root { font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; position: fixed; right: 20px; bottom: 20px; z-index: 99999; }

.upcl-launcher {
	width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--upcl-accent, #FFB81C);
	background: var(--upcl-primary, #8A1538); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .15s ease;
}
.upcl-launcher:hover, .upcl-launcher:focus-visible { transform: scale(1.07); outline: 2px solid #000; outline-offset: 2px; }
.upcl-launcher.upcl-hidden { display: none; }

.upcl-panel {
	width: 360px; max-width: calc(100vw - 24px); height: 540px; max-height: calc(100vh - 40px);
	background: #F7F6EF; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 12px 40px rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.12);
}
.upcl-panel[hidden] { display: none; }

.upcl-header {
	background: var(--upcl-primary, #8A1538); color: #fff; padding: 14px 16px;
	display: flex; align-items: center; justify-content: space-between;
	border-bottom: 4px solid var(--upcl-accent, #FFB81C);
}
.upcl-title { font-weight: 700; font-size: 17px; }
.upcl-sub { font-size: 12px; opacity: .85; }
.upcl-close { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }

.upcl-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.upcl-msg { display: flex; }
.upcl-msg.upcl-user { justify-content: flex-end; }
.upcl-bubble { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; word-wrap: break-word; white-space: pre-wrap; }
.upcl-bot .upcl-bubble { background: #fff; color: #000; border: 1px solid rgba(0,0,0,.1); border-bottom-left-radius: 3px; }
.upcl-user .upcl-bubble { background: var(--upcl-primary, #8A1538); color: #fff; border-bottom-right-radius: 3px; }
.upcl-bubble a { color: inherit; text-decoration: underline; }

.upcl-chips { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px; max-height: 118px; overflow-y: auto; border-top: 1px solid rgba(0,0,0,.08); }
.upcl-chip {
	border: 1px solid var(--upcl-primary, #8A1538); background: #fff; color: var(--upcl-primary, #8A1538);
	border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.upcl-chip:hover, .upcl-chip:focus-visible { background: var(--upcl-primary, #8A1538); color: #fff; }
.upcl-chip-human { background: var(--upcl-accent, #FFB81C); border-color: var(--upcl-accent, #FFB81C); color: #000; font-weight: 700; }

.upcl-footer { display: flex; gap: 6px; padding: 10px 12px; background: #fff; border-top: 1px solid rgba(0,0,0,.1); }
.upcl-input { flex: 1; border: 1px solid #bbb; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; min-width: 0; }
.upcl-send { background: var(--upcl-primary, #8A1538); color: #fff; border: 0; border-radius: 8px; padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; }

.upcl-form { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.upcl-form label { font-size: 12.5px; font-weight: 700; display: flex; flex-direction: column; gap: 3px; color: #000; }
.upcl-form input, .upcl-form textarea { border: 1px solid #bbb; border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 14px; font-weight: 400; width: 100%; }
.upcl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.upcl-submit { background: var(--upcl-primary, #8A1538); color: #fff; border: 0; border-radius: 8px; padding: 10px; font: inherit; font-weight: 700; cursor: pointer; border-bottom: 3px solid var(--upcl-accent, #FFB81C); }
.upcl-submit:disabled { opacity: .6; cursor: default; }
.upcl-status { font-size: 12.5px; color: #b32d2e; min-height: 1em; }

@media (max-width: 480px) {
	#upcl-root { right: 12px; bottom: 12px; }
	.upcl-panel { width: calc(100vw - 24px); height: calc(100vh - 24px); }
}
@media (prefers-reduced-motion: reduce) { .upcl-launcher { transition: none; } }

/* v2: threaded replies */
.upcl-launcher { position: relative; }
.upcl-dot { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #d63638; border: 2px solid #fff; }
.upcl-dot[hidden] { display: none; }
.upcl-staff { justify-content: flex-start; }
.upcl-staff .upcl-bubble { background: #fff8e6; color: #000; border: 1px solid var(--upcl-accent, #FFB81C); border-left-width: 4px; border-bottom-left-radius: 3px; }
.upcl-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--upcl-primary, #8A1538); margin-bottom: 2px; }
.upcl-time { font-size: 10.5px; opacity: .65; margin-top: 3px; }
.upcl-modebar { font-size: 12px; padding: 5px 12px; background: var(--upcl-accent, #FFB81C); color: #000; font-weight: 700; }
.upcl-modebar[hidden] { display: none; }
.upcl-opt { font-weight: 400; color: #555; }
.upcl-note { font-size: 12px; color: #555; }