/* support-chat.css — dev-only "chat with an agent" widget (see js/support-chat.js). */
#hpm-support { font-family: Raleway, Montserrat, system-ui, sans-serif; }

#hpm-support-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
    width: 56px; height: 56px; border-radius: 50%; border: 0;
    background: #6c971a; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.28);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
#hpm-support-fab:hover { transform: scale(1.06); background: #5b8016; }
#hpm-support-fab.open { background: #444; }
#hpm-support-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: #e53935; color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}

#hpm-support-panel {
    position: fixed; right: 20px; bottom: 88px; z-index: 2147483000;
    width: 380px; height: 540px; max-height: calc(100vh - 110px);
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.30); display: flex; flex-direction: column;
}
#hpm-support-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: #2f3b1c; color: #fff; font-size: 14px; font-weight: 600;
}
#hpm-support-title { flex: 1; }
#hpm-support-dot { width: 10px; height: 10px; border-radius: 50%; background: #9e9e9e; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
#hpm-support-dot[data-state="online"] { background: #4caf50; }
#hpm-support-dot[data-state="idle"] { background: #ffb300; }
#hpm-support-dot[data-state="connecting"] { background: #9e9e9e; animation: hpm-pulse 1s infinite; }
#hpm-support-dot[data-state="error"] { background: #e53935; }
#hpm-support-close { border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
#hpm-support-body { flex: 1; min-height: 0; display: flex; }
#hpm-support-body > deep-chat { flex: 1; }
#hpm-support-status { margin: auto; color: #666; font-size: 14px; padding: 20px; text-align: center; }

@media (max-width: 480px) {
    #hpm-support-panel { right: 0; bottom: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    #hpm-support-fab { right: 14px; bottom: 14px; }
}

/* Simulated cursor shown while the agent remote-controls the page. */
#hpm-agent-cursor {
    position: fixed; left: 0; top: 0; z-index: 2147483001; pointer-events: none;
    transform: translate(-100px, -100px);
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
#hpm-agent-cursor svg { display: block; transform: translate(-4px, -2px); transition: transform .1s; }
#hpm-agent-cursor.press svg { transform: translate(-4px, -2px) scale(.85); }
#hpm-agent-cursor-label {
    position: absolute; left: 22px; top: 22px; white-space: nowrap;
    background: #ff3d00; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.hpm-agent-ripple {
    position: fixed; z-index: 2147483000; pointer-events: none;
    width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    border: 3px solid #ff3d00; background: rgba(255,61,0,.25);
    animation: hpm-ripple .65s ease-out forwards;
}
.hpm-agent-chip {
    position: fixed; z-index: 2147483001; pointer-events: none;
    background: #ff3d00; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
}
@keyframes hpm-ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
@keyframes hpm-pulse { 50% { opacity: .35; } }