/**
 * The floating video-chat button.
 *
 * Small on purpose. It sits on top of somebody else's page - a chat they are
 * in the middle of, on a phone - and the version of this that works is the one
 * that is noticed once and then ignored until it is wanted. So: one thumb-
 * sized circle, no label, no bounce after the first few seconds.
 *
 * Hidden until bubble.js decides it should be here, because it cannot show
 * until we know whether it was dismissed - and a button that appears and then
 * vanishes is worse than one that arrives a frame late.
 */

.rc-bubble[hidden] { display: none !important; }

.rc-bubble {
    position: fixed;
    right: 14px;
    /* Lifted clear of whatever is pinned to the bottom of this page - on the
       mobile chat pages that is the message box, and a button sitting on top
       of it would be sabotage. bubble.js measures and sets this. */
    bottom: calc(var(--rc-bubble-lift, 16px) + env(safe-area-inset-bottom, 0px));
    z-index: 9990;   /* above the page, below the site's own modals */
    width: 52px;
    height: 52px;
}

.rc-bubble-go {
    position: relative;   /* the shine below is drawn against this */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #2f9dff, #0072e0);
    box-shadow: 0 4px 14px rgba(0, 74, 143, .38), 0 1px 3px rgba(0, 0, 0, .2);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, box-shadow .18s ease;
}

.rc-bubble-go:hover,
.rc-bubble-go:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 74, 143, .45), 0 1px 3px rgba(0, 0, 0, .2);
}

.rc-bubble-go:active { transform: scale(.94); }

/* A shine that crosses the face every few seconds.
 *
 * Movement is what an eye at the edge of its vision actually catches, and the
 * ring below only runs three times - after that the button is silent, which is
 * why nobody found it. This is the smallest movement that still registers: a
 * band of light travelling across, five seconds of stillness, again.
 *
 * Drawn inside the circle and clipped by it, so nothing escapes the button.
 * The face is a gradient rather than a flat colour, so the highlight is
 * white at low opacity - a lighter blue would read as a seam. */
.rc-bubble-go { overflow: hidden; }

.rc-bubble-go::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -140%;
    width: 60%;
    height: 220%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: rotate(22deg);
    animation: rc-bubble-shine 5.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes rc-bubble-shine {
    /* The sweep itself is the first sixth of the cycle; the rest is the
       button sitting still, which is most of what it should be doing. */
    0%   { left: -140%; }
    18%  { left: 160%; }
    100% { left: 160%; }
}

.rc-bubble-go:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Small, and pushed out past the corner so that a thumb aiming at it is not
   also over the button: a miss here opens a video chat the person was trying
   to close. The drawn cross is 10px inside a 24px target for the same reason. */
.rc-bubble-x {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #55606d;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
    opacity: .85;
}

.rc-bubble-x:hover { opacity: 1; }

.rc-bubble-x:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* One ring, three times on arrival, and then it never runs again. Enough to
   catch an eye that is looking elsewhere; not enough to be the thing on the
   page that will not stop - the shine above is what carries on.

   On the container and not on the button, because the button clips its own
   overflow to keep the shine inside the circle, and this has to grow past it.
   Behind everything, so it cannot sit over the dismiss cross. */
.rc-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    border: 2px solid rgba(47, 157, 255, .75);
    animation: rc-bubble-ring 2.2s ease-out 3;
    pointer-events: none;
}

@keyframes rc-bubble-ring {
    0%   { transform: scale(1);   opacity: .8; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rc-bubble::after { animation: none; }
    .rc-bubble-go::before { display: none; }
    .rc-bubble-go { transition: none; }
}

/* Roomier where there is room. Still small. */
@media (min-width: 900px) {
    .rc-bubble { right: 22px; width: 56px; height: 56px; }
}