/* Circle Health — "Have a question?" pop-up.
   Shared by the dashboard shell (main.css @imports this file) and the
   logged-out signup/login pages (linked directly), since 2026-09-08 the
   pop-up is open to visitors too. Every colour comes from tokens.css. */
/* ---------------------------------------------------------------------------
   "Have a question?" pop-up (dash_shell_opts, test cohort only — see
   dashAskVisible in dash_main.go). Launcher + docked panel hosting the
   welcome-mode chat (dash_ask_new_content → gsai showbotchat, dashboard=1).
   The skin is scoped to .dash-ask-panel and styles the engine's real DOM:
   .botchatbubble.from_user / .from_agent, the .botchat_streaming bubble with
   its .botchat_wait spinner (restyled as typing dots), and the
   .dash-chat-input-area composer. 2026-09-02. */

/* Launcher */
.dash-ask-btn {
	position: fixed; right: 24px; bottom: 24px; z-index: 900;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 20px 12px 16px; border: 0; border-radius: 999px;
	background: var(--color-navy); color: #fff;
	font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
	box-shadow: 0 8px 24px rgba(20, 30, 50, .22), 0 1px 2px rgba(0,0,0,.12);
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.dash-ask-btn:hover { box-shadow: 0 12px 28px rgba(20, 30, 50, .28), 0 1px 2px rgba(0,0,0,.12); }
.dash-ask-btn:active { transform: translateY(0) scale(.98); }
.dash-ask-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.dash-ask-btn[hidden] { display: none; }
.dash-ask-badge {
	position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 999px; background: var(--color-orange); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
	box-shadow: 0 0 0 2px var(--color-cream);
}


/* Panel */
.dash-ask-panel {
	position: fixed; right: 24px; bottom: 24px; z-index: 901;
	width: min(400px, calc(100vw - 32px));
	height: min(620px, calc(100vh - 48px));
	display: flex; flex-direction: column;
	background: var(--color-cream); color: var(--color-font);
	border-radius: 20px; overflow: hidden;
	box-shadow: 0 24px 64px rgba(20, 30, 50, .28), 0 2px 6px rgba(0,0,0,.10);
	transform-origin: 100% 100%;
	animation: dashAskPop .24s cubic-bezier(.2, .9, .3, 1.15);
}
.dash-ask-panel[hidden] { display: none; }
@keyframes dashAskPop {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header: avatar, name, live status */
.dash-ask-head {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 14px 14px 16px;
	background: var(--color-navy); color: #fff;
}
.dash-ask-avatar {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-cream);
}
.dash-ask-avatar img { width: 20px; height: 22px; }
.dash-ask-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dash-ask-title { font-weight: 600; font-size: 15px; }
.dash-ask-status { font-size: 12px; opacity: .78; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.dash-ask-status i { width: 7px; height: 7px; border-radius: 50%; background: #5fd38d; box-shadow: 0 0 0 3px rgba(95,211,141,.22); }
.dash-ask-close {
	flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%;
	background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
	transition: background .15s ease;
}
.dash-ask-close:hover { background: rgba(255,255,255,.14); }

/* Body: the scroller. The engine autoscrolls #chat-window-content, so the
   body IS the scroll container; .section lays out messages + composer. */
.dash-ask-body {
	flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
	scroll-behavior: smooth; position: relative;
}
.dash-ask-body .section {
	display: flex; flex-direction: column; min-height: 100%;
	padding: 0; margin: 0;
}
.dash-ask-body [id^="botchatmsgs_"] { padding: 14px 14px 0; }
.dash-ask-body [id^="botchatmsgs_"] + [id^="botchatmsgs_adder_"] { padding-top: 0; }
.dash-ask-body [id^="botchatmsgs_adder_"]:empty { padding: 0; }

/* Composer: always at the bottom, never moves */
.dash-ask-body .dash-chat-input-area {
	margin-top: auto; position: sticky; bottom: 0;
	padding: 10px 12px 12px; border-top: 1px solid rgba(20,30,50,.08);
	background: var(--color-cream);
}
.dash-ask-body .dash-chat-input-wrap { display: flex; align-items: flex-end; gap: 8px; }
.dash-ask-body .dash-chat-input {
	flex: 1; height: 44px; min-height: 44px; max-height: 140px; padding: 11px 16px;
	border: 1px solid rgba(20,30,50,.14); border-radius: 22px;
	background: #fff; color: var(--color-font);
	font: inherit; font-size: 15px; line-height: 1.4; resize: none; outline: none;
	overflow-y: hidden; box-sizing: border-box; box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Suggestion chips live with the composer (Schien): one scrolling row */
.dash-ask-chips {
	display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dash-ask-chips::-webkit-scrollbar { display: none; }
.dash-ask-chip {
	flex: 0 0 auto; padding: 8px 14px; border: 1px solid rgba(20,30,50,.14); border-radius: 999px;
	background: #fff; color: var(--color-navy); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.dash-ask-chip:hover { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
/* Quiet focus (Pavel, 2026-09-02): no glow ring, the border just firms up */
.dash-ask-body .dash-chat-input:focus { border-color: rgba(20,30,50,.32); box-shadow: inset 0 1px 2px rgba(0,0,0,.04); }
.dash-ask-body .dash-chat-send-btn {
	flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-navy); color: #fff; cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.dash-ask-body .dash-chat-send-btn:hover { transform: scale(1.05); }
.dash-ask-body .dash-chat-send-btn:active { transform: scale(.96); }

/* Messages */
.dash-ask-body .botchatbubble {
	position: relative; max-width: 82%;
	padding: 10px 14px; margin: 0 0 10px;
	border-radius: 18px; font-size: 15px; line-height: 1.45;
	word-wrap: break-word; overflow-wrap: anywhere;
}
/* Only genuinely new bubbles slide in: the person's message and the writing
   bubble. Replies re-rendered into history at the end of a round must not
   move, or the reply "jumps" when the final render replaces the stream. */
.dash-ask-body .botchatbubble.from_user,
.dash-ask-body .botchatbubble.botchat_streaming { animation: dashAskIn .22s ease-out both; }
.dash-ask-body .botchat-status { font-size: 13px; color: #6b7280; margin-left: 4px; vertical-align: middle; }
@keyframes dashAskIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.dash-ask-body .botchatbubble.from_user {
	margin-left: auto; text-align: left;
	background: var(--color-navy); color: #fff;
	border-bottom-right-radius: 6px;
}
.dash-ask-body .botchatbubble.from_agent,
.dash-ask-body .botchatbubble.botchat_streaming {
	margin-right: auto; margin-left: 30px; text-align: left;
	background: #fff; color: var(--color-font);
	border-bottom-left-radius: 6px;
	box-shadow: 0 1px 2px rgba(20,30,50,.06), 0 4px 14px rgba(20,30,50,.05);
}
/* Who is talking: AI answers and staff replies look different.
   AI: sparkle avatar + "Clara AI" label. Staff (askChatDeliverReply writes
   <p class="ask-team-reply"><span class="ask-team-who">Name, Circle team</span>…):
   person avatar on a warm tint + the person's name as the label. */
.dash-ask-body .botchatbubble.from_agent,
.dash-ask-body .botchatbubble.botchat_streaming { padding-top: 26px; }
.dash-ask-body .botchatbubble.from_agent::before,
.dash-ask-body .botchatbubble.botchat_streaming::before {
	content: ""; position: absolute; left: -30px; bottom: 2px;
	width: 24px; height: 24px; border-radius: 50%;
	background: #fff url(/dashboard/imgs/icons/sparkles.svg) center / 14px 14px no-repeat;
	box-shadow: 0 1px 2px rgba(20,30,50,.10), 0 0 0 1px rgba(20,30,50,.06);
}
.dash-ask-body .botchatbubble.from_agent::after,
.dash-ask-body .botchatbubble.botchat_streaming::after {
	content: "Clara AI"; position: absolute; top: 7px; left: 14px;
	font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: #6b7280;
}
.dash-ask-body .botchatbubble.from_agent:has(.ask-team-reply) {
	background: #fff7ef; border: 1px solid rgba(232,120,58,.25);
}
.dash-ask-body .botchatbubble.from_agent:has(.ask-team-reply)::before {
	background: #fde7d6 url(/dashboard/imgs/icons/user-round.svg) center / 14px 14px no-repeat;
	box-shadow: 0 0 0 1px rgba(232,120,58,.35);
}
.dash-ask-body .botchatbubble.from_agent:has(.ask-team-reply)::after { content: none; }
.dash-ask-body .ask-team-who {
	display: block; margin: -18px 0 6px; font-size: 11px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase; color: var(--color-orange);
}
.dash-ask-body .botchatbubble p { margin: 0 0 8px; }
.dash-ask-body .botchatbubble p:last-child { margin-bottom: 0; }
.dash-ask-body .botchatbubble ul, .dash-ask-body .botchatbubble ol { margin: 6px 0; padding-left: 20px; }
.dash-ask-body .botchatbubble a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.dash-ask-body .botchatbubble.from_user a { color: #fff; }

/* Typing: the engine drops a .botchat_wait spinner in the streaming bubble
   until the first token arrives — show it as three breathing dots. */
.dash-ask-body .botchat_wait.botchat-spinner {
	display: inline-block; width: 8px; height: 8px; margin: 6px 22px 6px 2px;
	border-radius: 50%; background: #9aa3b2; opacity: 1;
	box-shadow: 11px 0 0 #9aa3b2, 22px 0 0 #9aa3b2;
	animation: dashAskDots 1.1s infinite ease-in-out;
	vertical-align: middle;
}
@keyframes dashAskDots {
	0%, 100% { background: #4a5468; box-shadow: 11px 0 0 #b9c0cc, 22px 0 0 #b9c0cc; }
	33%      { background: #b9c0cc; box-shadow: 11px 0 0 #4a5468, 22px 0 0 #b9c0cc; }
	66%      { background: #b9c0cc; box-shadow: 11px 0 0 #b9c0cc, 22px 0 0 #4a5468; }
}
/* Writing: a soft caret while text streams in */
/* No typing caret: it replaced the "Clara AI" label while the answer was
   streaming (Pavel, 2026-09-03: "it's showing a | pipe?"). */

/* Engine chrome that has no place in a customer chat */
.dash-ask-body .botchat_thinking,
.dash-ask-body .botchatresolver,
.dash-ask-body acronym,
.dash-ask-body .sidereelresolver,
.dash-ask-body .inputrow,
.dash-ask-body .sectiontitle,
.dash-ask-body .buttonbelt,
.dash-ask-body .clear { display: none !important; }

/* Welcome panel (before the first message) */
.dash-ask-body .chat-new-welcome { padding: 4px 0 0; }

@media (max-width: 640px) {
	.dash-ask-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
	.dash-ask-btn { right: 16px; bottom: 16px; }
	.dash-ask-body .botchatbubble { max-width: 88%; }
}

/* Guest verification step (askguest.go), shown under the greeting before the first message */
.dash-ask-body .dash-ask-verify { margin: 4px 16px 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(20,30,50,.10); }
.dash-ask-body .dash-ask-verify-p { margin: 0 0 8px; font-size: 13px; color: rgba(20,30,50,.7); }
.dash-ask-body .dash-chat-input:disabled { background: rgba(20,30,50,.04); color: rgba(20,30,50,.45); }
.dash-ask-body .dash-chat-send-btn:disabled { opacity: .4; cursor: default; }
/* On the logged-out pages the launcher must clear the page's own fixed elements */
body.login-page .dash-ask-btn, body.signup-page .dash-ask-btn { z-index: 60; }