/* ===========================================
   Steelhead Sam — Pop-in Character
   Appears bottom-left with a short message
=========================================== */

#sam-pop {
    position: fixed;
    left: -260px;              /* start off-screen */
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    transition: left 0.8s ease;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    pointer-events: auto;
}

/* When active */
#sam-pop.sam-pop--show {
    left: 20px;
}

/* Sam portrait */
#sam-pop .sam-pop-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image: image-set(
        url('/assets/images/icons/steelhead-sam_2x.png') 2x,
        url('/assets/images/icons/steelhead-sam.png') 1x
    );
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 18px rgba(0,255,128,0.45);
    outline: 2px solid rgba(0,255,128,0.7);
}

/* Speech bubble */
#sam-pop .sam-pop-bubble {
    max-width: 260px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(6, 13, 20, 0.92);
    color: #f5f9ff;
    font-size: 0.95rem;
    line-height: 1.5;
    border: 1px solid rgba(0,255,128,0.35);
    box-shadow: 0 0 16px rgba(0,0,0,0.55);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* When bubble is visible */
#sam-pop .sam-pop-bubble.sam-pop-bubble--show {
    opacity: 1;
    transform: translateY(0);
}

/* Make the whole thing clickable without looking like a button */
#sam-pop.sam-pop--clickable {
    cursor: pointer;
}

/* Optional: small hover “wave” */
#sam-pop.sam-pop--clickable:hover .sam-pop-portrait {
    transform: rotate(-4deg) scale(1.03);
    transition: transform 0.25s ease;
}

/* Don’t cover the chat button / keep Sam off small phones (for now) */
@media (max-width: 699px) {
    #sam-pop {
        display: none;
    }
}