/**
 * 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: 700;
    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; }

/* Shift the FAB up when the sticky apply bar is on screen — apply-
   start jobs render an .apply-bar with the "Quick apply" CTA pinned
   to the bottom of the detail panel, and the FAB's default
   bottom:24px lands it right on top of that CTA. The apply bar is
   ~90px tall, so a 110px floor clears it with breathing room. */
body:has(.apply-bar) .chat-fab {
    bottom: 110px;
}
.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;
    /* Brand-coloured ring at rest — defines the avatar circle
       against the white pill background and echoes the pill's
       outer brand border for a deliberate "ring within a ring"
       silhouette. Drops into a surface ring on hover (see below)
       once the pill background flips to brand. */
    box-shadow: 0 0 0 2px var(--brand);
}
.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).

   We keep the widget host in the layout at all times (so the legacy
   widget's shadow DOM can render asynchronously before the user opens
   chat) and gate visibility via opacity / transform / visibility —
   that combination is transitionable, unlike `display`. Opening the
   panel is then a real motion cue (fade + lift on desktop, slide-up
   on mobile) instead of an instant pop-in. */
#chat-widget-container chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 420px;
    height: min(640px, calc(100vh - 120px));
    height: min(640px, calc(100dvh - 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;

    /* Resting (closed) state — invisible, click-through, lifted just
       enough to read as "entering from below" when chat-open hits.
       visibility flips to hidden so the host doesn't intercept taps
       or scroll while closed. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.98);
    transform-origin: bottom right;
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 200ms;
}
#chat-widget-container.chat-open chat-widget {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

/* Mobile — full-viewport panel that slides up from the bottom edge.
   No rounded top, no inset; the chat takes the screen. Sizing uses
   dvh so the panel doesn't oscillate by ~50px when the URL bar
   collapses mid-conversation. */
@media (max-width: 720px) {
    #chat-widget-container chat-widget {
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        transform: translateY(100%);
        transform-origin: center bottom;
        box-shadow: none;
    }
    #chat-widget-container.chat-open chat-widget {
        transform: translateY(0);
    }
}

/* ─── 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); }