/* ---------------------------------------------------------------
   Public enrollment assistant widget (signupbeta-chat-widget.component.js)

   Shared by every public signup surface - /signupbeta, /signup and
   /apply - so the widget cannot drift between them. It used to live
   inline in Signupbeta.cshtml; it moved here when the widget was put
   on the other two forms rather than being pasted three times.

   Bubble styling follows the CodePen "Chat Interface" look: pill
   bubbles with the avatar overlapping the top corner, alternating
   sides and a soft drop shadow.

   Colours come from the --bh-brand* custom properties. Signupbeta
   declares its own set in the page, and the controllers overwrite
   them from the partner's configured hex once LoadProducts resolves.
   The block below is only the pre-load default, so pages that do not
   declare the palette themselves (Signup.cshtml, Apply.Mobile.cshtml)
   still get a sane colour instead of an unset variable.
   --------------------------------------------------------------- */
:root {
    --bh-brand: #E91E8C;
    --bh-brand-rgb: 233, 30, 140;
    --bh-brand-dark: #D6197E;
    --bh-brand-tint: #FDF2F8;
    --bh-brand-edge: #FCE4F1;
    --bh-brand-edge-strong: #FACDE6;
    --bh-brand-soft: rgba(233, 30, 140, 0.16);
}

.bh-beta-chat { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: inherit; display: flex; flex-direction: column; align-items: flex-end; }

/* Launcher */
.bh-beta-launch { order: 2; height: 52px; min-width: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--bh-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 24px -8px rgba(0,0,0,0.35); transition: transform .18s ease, box-shadow .18s ease; }
.bh-beta-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(0,0,0,0.4); }
.bh-beta-launch:focus-visible { outline: 3px solid var(--bh-brand-soft); outline-offset: 3px; }
.bh-beta-launch.open { padding: 0; width: 52px; }
.bh-beta-launch svg { flex-shrink: 0; }

/* Panel */
.bh-beta-panel { order: 1; width: 384px; max-width: calc(100vw - 32px); height: 760px; max-height: calc(100vh - 110px); margin-bottom: 14px; background: #fff; border: 1px solid #ececf1; border-radius: 24px; box-shadow: 0 24px 50px -14px rgba(15,23,42,0.28); display: flex; flex-direction: column; overflow: hidden; animation: bhBetaRise .24s cubic-bezier(.2,.8,.3,1); }
@keyframes bhBetaRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Header */
.bh-beta-head { background: var(--bh-brand); color: #fff; padding: 13px 14px 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bh-beta-head-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bh-beta-head-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--bh-brand); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,0.18); }
.bh-beta-head-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.bh-beta-head-titles { min-width: 0; }
.bh-beta-head-titles strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-beta-head-titles > span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .9; margin-top: 2px; }
.bh-beta-live { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; flex-shrink: 0; }
.bh-beta-head-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bh-beta-head-actions button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.bh-beta-head-actions button:hover { background: rgba(255,255,255,.34); }

/* Thread */
.bh-beta-body { flex: 1; overflow-y: auto; overflow-anchor: auto; padding: 26px 16px 14px; background: #f6f7fb; }
.bh-beta-body::-webkit-scrollbar { width: 6px; }
.bh-beta-body::-webkit-scrollbar-thumb { background: #d4d6e0; border-radius: 3px; }
.bh-beta-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }

.bh-beta-msg { position: relative; margin-bottom: 26px; max-width: 92%; border-radius: 28px; background: #fff; animation: bhBetaPop .22s ease; }
@keyframes bhBetaPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bh-beta-msg p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.bh-beta-msg.left { padding: 14px 20px 14px 62px; color: #1f2937; box-shadow: 0 10px 16px -10px rgba(15,23,42,.45); }
.bh-beta-msg.right { align-self: flex-end; padding: 14px 62px 14px 20px; background: var(--bh-brand); color: #fff; box-shadow: 0 10px 16px -10px var(--bh-brand-soft); }
.bh-beta-msg.right p { font-weight: 500; }
.bh-beta-msg a { color: inherit; text-decoration: underline; font-weight: 600; }
.bh-beta-msg.left a { color: var(--bh-brand); }

/* Avatar overlapping the bubble's top corner */
.bh-beta-avatar { position: absolute; top: -9px; left: 10px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #fff; color: var(--bh-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; box-shadow: 0 6px 12px -3px rgba(15,23,42,.45); }
.bh-beta-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.bh-beta-msg.right .bh-beta-avatar { left: auto; right: 10px; background: #fff; color: var(--bh-brand); }

/* Typing indicator */
.bh-beta-typing { display: flex; align-items: center; gap: 5px; min-height: 20px; }
.bh-beta-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa1b1; opacity: .35; animation: bhBetaDots 1.1s ease-in-out infinite; }
.bh-beta-typing i:nth-child(2) { animation-delay: .18s; }
.bh-beta-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes bhBetaDots { 0%,80%,100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }
.bh-beta-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Name gate + agent handoff */
.bh-beta-namegate { list-style: none; align-self: stretch; display: flex; align-items: center; gap: 8px; margin: -12px 0 22px 62px; }
.bh-beta-namegate form { display: flex; gap: 6px; flex: 1; min-width: 0; }
.bh-beta-namegate input { flex: 1; min-width: 0; border: 1px solid #e2e4ee; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-family: inherit; outline: none; }
.bh-beta-namegate input:focus { border-color: var(--bh-brand); box-shadow: 0 0 0 3px var(--bh-brand-soft); }
.bh-beta-namegate button[type="submit"] { border: 0; border-radius: 999px; padding: 8px 16px; background: var(--bh-brand); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bh-beta-namegate button[type="submit"]:disabled { opacity: .45; cursor: not-allowed; }
.bh-beta-skip { border: 0; background: none; color: #9aa1b1; font-size: 12px; cursor: pointer; padding: 6px 4px; text-decoration: underline; font-family: inherit; }
.bh-beta-skip:hover { color: #64748b; }

.bh-beta-handoff { background: #fff; border: 1px solid #e2e4ee; border-radius: 16px; padding: 12px; margin-top: 4px; }
.bh-beta-handoff-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bh-beta-handoff-actions button, .bh-beta-handoff-call { border: 0; border-radius: 999px; padding: 9px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--bh-brand); color: #fff; text-decoration: none; display: inline-flex; align-items: center; font-family: inherit; }
.bh-beta-handoff-call { background: #fff; color: var(--bh-brand); border: 1px solid var(--bh-brand-edge-strong); }
.bh-beta-handoff-actions button:disabled { opacity: .5; cursor: not-allowed; }
.bh-beta-handoff-actions .bh-beta-skip { background: none; color: #9aa1b1; font-weight: 500; padding: 6px 4px; }
.bh-beta-handoff-form label { display: block; font-size: 11.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.bh-beta-handoff-form input, .bh-beta-handoff-form textarea { width: 100%; border: 1px solid #e2e4ee; border-radius: 12px; padding: 9px 12px; font-size: 13px; font-family: inherit; outline: none; margin-bottom: 8px; resize: vertical; }
.bh-beta-handoff-form input:focus, .bh-beta-handoff-form textarea:focus { border-color: var(--bh-brand); box-shadow: 0 0 0 3px var(--bh-brand-soft); }
.bh-beta-handoff-error { display: block; margin-top: 6px; color: #dc2626; font-size: 11.5px; }
.bh-beta-connecting { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #475569; font-weight: 500; }

/* Suggested questions */
.bh-beta-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 2px 6px; }
.bh-beta-chips button { background: #fff; border: 1px solid #e2e4ee; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 500; color: #475569; cursor: pointer; transition: all .15s ease; }
.bh-beta-chips button:hover { border-color: var(--bh-brand); color: var(--bh-brand); background: var(--bh-brand-soft); }
.bh-beta-chips button:disabled { opacity: .5; cursor: not-allowed; }

/* Compose */
.bh-beta-compose { display: grid; grid-template-columns: 1fr 46px; align-items: center; border-top: 1px solid #ececf1; background: #fff; }
.bh-beta-compose input { border: 0; padding: 14px 16px; font-size: 13.5px; outline: none; background: transparent; color: #1f2937; font-family: inherit; }
.bh-beta-compose input::placeholder { color: #9aa1b1; }
.bh-beta-compose button { height: 36px; width: 36px; margin-right: 8px; border: 0; border-radius: 50%; background: var(--bh-brand); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s ease; }
.bh-beta-compose button:disabled { opacity: .4; cursor: not-allowed; }
.bh-beta-foot { background: #fff; border-top: 1px solid #f1f2f6; padding: 7px 16px 9px; font-size: 10.5px; color: #9aa1b1; text-align: center; }

@media (max-width: 640px) {
    .bh-beta-chat { right: 12px; bottom: 12px; left: 12px; align-items: flex-end; }
    .bh-beta-panel { width: 100%; height: calc(100vh - 100px); }
    .bh-beta-launch-text { display: none; }
    .bh-beta-launch { padding: 0; width: 52px; }
}

/* ---------------------------------------------------------------
   A named human on the other end.

   While the AI is answering, every left-hand bubble carries the
   partner's mark. Once an agent claims the chat their initials
   replace it and their first name sits above the bubble, so the
   visitor can tell which replies came from a person.
   --------------------------------------------------------------- */
.bh-beta-avatar.is-agent { background: var(--bh-brand); color: #fff; font-size: 12.5px; letter-spacing: .02em; }
.bh-beta-who { position: absolute; top: -20px; left: 62px; font-size: 10.5px; font-weight: 700; color: #94a3b8; letter-spacing: .02em; }
.bh-beta-msg.right .bh-beta-who { left: auto; right: 62px; }

/* ---------------------------------------------------------------
   Shared images.

   Capped rather than natural size: a phone screenshot is taller
   than the whole panel, and a bubble that tall pushes the composer
   off screen. Click opens the full size in the lightbox below.
   --------------------------------------------------------------- */
.bh-beta-msg .bh-beta-img { display: block; max-width: 100%; max-height: 220px; border-radius: 16px; cursor: zoom-in; background: #eef0f6; }
.bh-beta-msg.left { padding-top: 14px; }

.bh-beta-lightbox { position: fixed; inset: 0; z-index: 10050; background: rgba(8,8,10,.92); display: flex; align-items: center; justify-content: center; padding: 28px; cursor: zoom-out; }
.bh-beta-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; cursor: default; box-shadow: 0 24px 60px -12px rgba(0,0,0,.9); }
.bh-beta-lightbox-x { position: fixed; top: 16px; right: 20px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; font-family: inherit; }
.bh-beta-lightbox-x:hover { background: rgba(255,255,255,.26); }

/* The attach button only exists while a live agent is connected, so the
   composer grid grows a column rather than reserving one that is usually empty. */
.bh-beta-compose.has-attach { grid-template-columns: 1fr 34px 46px; }
.bh-beta-attach { height: 30px; width: 30px; border: 0; border-radius: 50%; background: #f1f2f6; color: #64748b; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.bh-beta-attach:hover:enabled { background: #e2e4ee; color: var(--bh-brand); }
.bh-beta-attach:disabled { opacity: .45; cursor: not-allowed; }

/* An agent's "close" is a pause - the visitor can still type, and doing so
   reopens the conversation - so the footer says that rather than going quiet. */
.bh-beta-foot-reopen { color: var(--bh-brand); font-weight: 600; }