/* AI Doc Chatbot — front-end widget */
#adc-root, #adc-root * { box-sizing: border-box; }

/* Global widget scale: the whole widget (launcher + panel, and everything inside
   them) renders at this fraction of its natural size. Change this one value to
   resize the widget proportionally — nothing else needs to move. */
#adc-root { --adc-scale: .9; }

/* ── Satisfaction rating ────────────────────────────────────────────────────── */
.adc-star { font-size: 26px; cursor: pointer; color: #d1d5db; transition: color .12s; line-height: 1; }
.adc-star:hover, .adc-star.adc-star-on { color: #f59e0b; }

/* ── Launcher ──────────────────────────────────────────────────────────────── */
.adc-launcher {
	position: fixed;
	bottom: var(--adc-bottom, 22px);
	width: 60px; height: 60px;
	border: none; border-radius: 50%;
	cursor: pointer; color: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	display: flex; align-items: center; justify-content: center;
	z-index: 999998;
	transition: transform .15s ease, box-shadow .15s ease;
	transform: scale(var(--adc-scale, 1));
}
.adc-launcher:hover { transform: scale(calc(var(--adc-scale, 1) * 1.06)); }
.adc-launcher svg { width: 28px; height: 28px; }
.adc-right { right: 22px; }
.adc-left  { left:  22px; }
/* Scale toward the corner the widget is already pinned to, so it shrinks into
   place instead of drifting inward from its centre. */
.adc-launcher.adc-right, .adc-panel.adc-right { transform-origin: bottom right; }
.adc-launcher.adc-left,  .adc-panel.adc-left  { transform-origin: bottom left; }

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.adc-panel {
	position: fixed;
	/* 74px = the 60px launcher + a 14px gap; scaled so the clearance stays
	   proportional and can never drift out of step with --adc-scale. */
	bottom: calc(var(--adc-bottom, 22px) + (74px * var(--adc-scale, 1)));
	width: 380px; max-width: calc(100vw - 32px);
	height: 560px; max-height: calc(100vh - 130px);
	background: #fff; border-radius: 16px;
	box-shadow: 0 12px 48px rgba(0,0,0,.28);
	display: flex; flex-direction: column;
	overflow: hidden; z-index: 999999;
	/* The widget scale is folded into BOTH transform states — leaving it out of
	   either one would make the panel snap to full size as the animation ends. */
	opacity: 0; transform: translateY(12px) scale(calc(var(--adc-scale, 1) * .98));
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.adc-panel.adc-open { opacity: 1; transform: translateY(0) scale(var(--adc-scale, 1)); pointer-events: auto; }

/* ── Header (top segment: company branding only) ─────────────────────────────── */
.adc-header { color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.adc-header-av {
	width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 700; color: #fff;
	flex-shrink: 0; overflow: hidden;
}
/* Logo in header: white bg + padding for transparent PNGs */
.adc-header-av.adc-has-logo {
	background: #fff;
	padding: 5px;
}
.adc-header-av img { width: 100%; height: 100%; object-fit: contain; }
.adc-header h3 {
	margin: 0; font-size: 16px; font-weight: 700; flex: 1; min-width: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adc-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.adc-close, .adc-end { background: none; border: none; color: #fff; cursor: pointer; line-height: 0; opacity: .9; display: flex; align-items: center; justify-content: center; padding: 3px; border-radius: 6px; }
.adc-close:hover, .adc-end:hover { opacity: 1; background: rgba(255,255,255,.16); }
.adc-close svg, .adc-end svg { width: 24px; height: 24px; display: block; }

/* ── Agent bar (bottom segment: who you're chatting with) ─────────────────────── */
.adc-agent-bar {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 16px;
	background: #fff;
	border-bottom: 1px solid #eee;
}
.adc-agent-av {
	width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700; color: #fff;
	flex-shrink: 0; overflow: hidden;
	background: #9ca3af;
}
.adc-agent-av.adc-has-photo img { width: 100%; height: 100%; object-fit: cover; }
.adc-agent-av.adc-has-logo { background: #fff; padding: 5px; border: 1px solid #eee; }
.adc-agent-av.adc-has-logo img { width: 100%; height: 100%; object-fit: contain; }
.adc-agent-info { display: flex; flex-direction: column; min-width: 0; }
.adc-agent-name {
	font-size: 14px; font-weight: 700; color: #1a1a1a; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adc-agent-role {
	font-size: 12px; color: #8a93a3; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Body wrapper (agent bar + messages; anchors the end-chat confirmation) ────── */
.adc-body { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* End-chat confirmation: a dimmed modal over the conversation area (below the
   header) so the chat stays visible behind it — clearly a prompt, not a deletion. */
.adc-confirm {
	position: absolute; inset: 0; z-index: 30;
	display: flex; align-items: center; justify-content: center;
	padding: 16px; background: rgba(15,23,42,.45);
}
.adc-confirm-card {
	background: #fff; border-radius: 12px; padding: 18px 20px;
	box-shadow: 0 12px 34px rgba(0,0,0,.28); text-align: center;
	max-width: 280px; width: 100%;
}
.adc-confirm-card p { margin: 0 0 14px; font-size: 14px; color: #1a1a1a; line-height: 1.45; }
.adc-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.adc-confirm-actions button { border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.adc-confirm-yes { background: #dc2626; color: #fff; }
.adc-confirm-yes:hover { background: #c01f1f; }
.adc-confirm-no { background: #eef1f6; color: #1a1a1a; }
.adc-confirm-no:hover { background: #e2e7ee; }

/* ── Messages area ──────────────────────────────────────────────────────────── */
.adc-messages {
	flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px;
	background: #f5f6f8;
	display: flex; flex-direction: column; gap: 6px;
}

/* ── Message rows (avatar + bubble) ────────────────────────────────────────── */
.adc-row { display: flex; align-items: flex-end; gap: 8px; }
.adc-row-bot  { justify-content: flex-start; }
.adc-row-user { justify-content: flex-end; }

/* Avatar wrapper */
.adc-av-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }

/* Avatar circle */
.adc-av {
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; color: #fff;
	flex-shrink: 0; overflow: hidden;
	background: #9ca3af;
}
/* Logo avatars: white background + padding so transparent PNGs look clean */
.adc-av.adc-av-logo {
	background: #fff;
	padding: 4px;
}
.adc-av img { width: 100%; height: 100%; object-fit: contain; }
.adc-av svg { width: 18px; height: 18px; }

/* Name label under avatar */
.adc-av-name {
	font-size: 9.5px; color: #8a93a3; white-space: nowrap;
	max-width: 54px; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

/* ── Bubbles ─────────────────────────────────────────────────────────────────── */
.adc-msg {
	max-width: 73%; padding: 10px 14px; border-radius: 16px;
	font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.adc-bot  { background: #fff; color: #1a1a1a; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.adc-user { color: #fff; border-bottom-right-radius: 4px; }

/* Sources */
.adc-sources { align-self: flex-start; margin-left: 40px; font-size: 12px; color: #555; }
.adc-sources a { color: inherit; text-decoration: underline; display: block; }

/* Typing indicator */
.adc-typing { background: #fff; border-radius: 16px; border-bottom-left-radius: 4px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.adc-typing span { display:inline-block; width:7px; height:7px; margin:0 2px; background:#aaa; border-radius:50%; animation: adc-blink 1.2s infinite both; }
.adc-typing span:nth-child(2){ animation-delay:.2s; }
.adc-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes adc-blink { 0%,80%,100%{ opacity:.2; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }

/* ── Input bar ───────────────────────────────────────────────────────────────── */
.adc-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eee; background: #fff; }
.adc-input textarea { flex: 1; resize: none; border: 1px solid #ddd; border-radius: 20px; padding: 10px 14px; font-size: 14px; max-height: 96px; outline: none; font-family: inherit; }
.adc-input textarea:focus { border-color: #bbb; }
.adc-input textarea:disabled { background: #f3f3f3; color: #999; cursor: not-allowed; }
.adc-send { border: none; border-radius: 50%; width: 40px; height: 40px; color: #fff; cursor: pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.adc-send:disabled { opacity: .5; cursor: default; }
.adc-send svg { width: 18px; height: 18px; }

/* Per-message word counter — sits between the input bar and the footer, both #fff. */
.adc-wordcount { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 16px 6px; background: #fff; font-size: 11px; color: #aab; }
.adc-wc-hint { color: #d33; }
.adc-wordcount.adc-over .adc-wc-num { color: #d33; font-weight: 600; }

.adc-footer { text-align: center; font-size: 11px; color: #aab; padding: 0 0 8px; background:#fff; }

/* ── Conversation topic selector ─────────────────────────────────────────────── */
.adc-topics {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 2px 0 4px 40px; /* indent to align with bot bubbles */
}
.adc-topic-btn {
	background: #fff;
	border: 2px solid currentColor;
	border-radius: 20px;
	padding: 7px 18px;
	font-size: 13px; font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
	font-family: inherit;
}

/* ── Pre-chat lead form ──────────────────────────────────────────────────────── */
.adc-lead { background:#fff; border-radius:14px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.adc-lead-intro { margin:0 0 12px; font-size:14px; color:#1a1a1a; line-height:1.45; }
.adc-lead input { width:100%; box-sizing:border-box; margin-bottom:8px; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; outline:none; font-family:inherit; }
.adc-lead input:focus { border-color:#bbb; }
.adc-phone-row { display:flex; gap:8px; margin-bottom:8px; align-items:stretch; }
.adc-phone-row .adc-f-phone { flex:1 1 auto; min-width:0; margin-bottom:0; }
/* Custom country dropdown */
.adc-country { position:relative; flex:0 0 auto; }
.adc-country-toggle { display:flex; align-items:center; gap:6px; height:100%; box-sizing:border-box; padding:10px; border:1px solid #ddd; border-radius:8px; background:#fff; font-size:14px; font-family:inherit; line-height:1; color:#1a1a1a; cursor:pointer; white-space:nowrap; }
.adc-country-toggle:focus { outline:none; border-color:#bbb; }
.adc-country-flag { width:20px; height:15px; object-fit:cover; border-radius:2px; flex:0 0 auto; background:#eee; }
.adc-country-caret { color:#8a93a3; font-size:11px; }
.adc-country-menu { position:absolute; z-index:20; top:calc(100% + 4px); left:0; width:250px; max-width:78vw; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,.14); overflow:hidden; }
.adc-country-search { width:100%; box-sizing:border-box; border:none; border-bottom:1px solid #eee; padding:9px 10px; font-size:13px; outline:none; font-family:inherit; }
.adc-country-options { list-style:none; margin:0; padding:4px 0; max-height:220px; overflow-y:auto; }
.adc-country-opt { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; font-size:13px; }
.adc-country-opt:hover { background:#f2f5f9; }
.adc-opt-name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1a1a1a; }
.adc-opt-dial { flex:0 0 auto; color:#8a93a3; }
.adc-lead-err { color:#dc2626; font-size:12px; min-height:14px; margin-bottom:6px; }
.adc-lead-start { width:100%; border:none; border-radius:8px; color:#fff; padding:11px; font-size:14px; font-weight:600; cursor:pointer; }
.adc-lead-start:disabled { opacity:.6; cursor:default; }
.adc-consent { margin:10px 0 0; font-size:11px; color:#8a93a3; line-height:1.4; }

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	/* The panel is fullscreen here, so scaling it would leave dead space around the
	   edges. Resetting the variable also returns the launcher to 60px, keeping it a
	   comfortable touch target. */
	#adc-root { --adc-scale: 1; }
	.adc-panel { width:100vw; height:100vh; max-height:100vh; bottom:0; right:0; left:0; border-radius:0; }
}