/**
 * v3 careerweb — chat FAB.
 *
 * The drawer itself is the legacy <chat-widget> web component's
 * shadow DOM — those styles live inside the widget, not here. We
 * only style the floating "open chat" pill and the fallback drawer
 * markup (Stage F's chat.js falls back to a stub drawer if the
 * legacy script fails to load).
 */

.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 5px 5px 5px 20px;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--brand);
    border-radius: 999px;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 60;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.chat-fab:hover {
    transform: translateY(-2px);
    background: var(--brand);
    color: var(--brand-on);
    box-shadow: 0 12px 32px var(--brand-tint-strong), var(--shadow-lg);
}
/* Avatar would blend into the brand-coloured pill on hover, so we add
   a white (surface) ring around it to keep the circle distinct. */
.chat-fab:hover .chat-fab-avatar {
    box-shadow: 0 0 0 2px var(--surface);
}
.chat-fab[hidden] { display: none; }
.chat-fab-label { line-height: 1; letter-spacing: -0.01em; }
.chat-fab-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand);
    color: var(--brand-on);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.chat-fab-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Floating chat panel ─── */
/* Mirrors v2's wrapping pattern: the <chat-widget> mounts inside
   #chat-widget-container, and chat.js toggles `.chat-open` on the
   container based on the widget's internal #chat-wrapper presence
   (MutationObserver in the shadow root). When closed we hide the
   widget host entirely so the widget's own collapsed bubble doesn't
   compete with our v3 chat-fab; when open we size the host to a
   floating panel anchored bottom-right. */
#chat-widget-container chat-widget { display: none; }
#chat-widget-container.chat-open chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 420px;
    height: min(640px, calc(100vh - 120px));
    z-index: 70;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(14, 14, 14, 0.18), 0 8px 24px rgba(14, 14, 14, 0.10);
    background: var(--surface);
    display: block;
}
@media (max-width: 720px) {
    #chat-widget-container.chat-open chat-widget {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        height: min(620px, calc(100vh - 80px));
    }
}

/* ─── Fallback stub drawer ─── */
/* Only rendered when the legacy chat-widget script fails to load.
   Same shape as the skeleton's drawer so behaviour stays familiar. */
.chat-drawer {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    height: 540px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 70;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: all 200ms ease;
}
.chat-drawer.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.chat-drawer .chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.chat-drawer .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-drawer .chat-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    line-height: 1.5;
    background: var(--surface-2);
    color: var(--ink);
    align-self: flex-start;
}
.chat-drawer .chat-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--ink-2);
    cursor: pointer;
    margin-left: auto;
}
.chat-drawer .chat-close:hover { color: var(--ink); }