/* ============================================================
   "Get Help Now" launcher tab
   ------------------------------------------------------------
   Split out of chat-popup.css so exactly one file describes the
   tab and two documents can share it with no build step:

     · SafeUTSite's own _Host.cshtml, for <ChatPopupFab />
     · the embedded widget's launcher frame
       (Pages/Widget/Launcher.cshtml)

   The two carry duplicate five-line MARKUP for phase 1 only; the
   Razor copy is deleted when SafeUTSite adopts the widget. Keep
   them in step — see docs/ChatPopup-Embedded-Widget.md §3.2.

   Every value below is lifted from safeut.org's own tab so the two
   render identically. The declaration set is load-bearing: the
   inline-block layout, the line-height and the chevron's baseline
   alignment together set the tab's thickness. Do not "tidy" it.
   ============================================================ */

/* Typeface. Carried here rather than inherited, because the launcher frame
   is its own document and has no popup window to inherit from. */
.chat-popup-fab {
    font-family: 'Sofia Pro', 'Century Gothic', 'Open Sans', sans-serif;
}

/* ── Launcher tab ────────────────────────────────────────────
   A "Get Help Now" tab fixed to the right edge of the viewport, rotated a
   quarter turn so the label reads bottom-to-top with the chevron at the top.
   Taken from safeut.org: `.l-side-sticky` for the placement, then `.gls-button
   .gls-button-primary .gls-button-small .gls-text-uppercase .gls-text-wide`
   for the button, with their custom properties resolved to literals. Keep the
   declaration set as-is: the inline-block layout and line-height set the tab's
   thickness. */
.chat-popup-fab {
    /* .l-side-sticky */
    position: fixed;
    right: 0;
    top: 50%;
    margin: -0.75em 0 0;
    transform: rotate(270deg) translate(50%);
    transform-origin: bottom right;
    z-index: 1050;

    /* .gls-button */
    display: inline-block;
    box-sizing: border-box;
    overflow: visible;
    width: auto;             /* ours: override global button width:31mm */
    padding: 8px 16px;       /* --button-small-padding */
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 10px;     /* --global-medium-border-radius */
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px;         /* --button-small-font-size */
    font-weight: 500;        /* --button-font-weight */
    line-height: 1.125;      /* --button-small-line-height */
    letter-spacing: 0.025em; /* --text-wide-tracking */
    text-transform: uppercase;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color;

    /* .gls-button-primary */
    background-color: #233245;                  /* --color-tertiary-9 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* --color-trans-white-3 */
    color: #ffffff;
}

.chat-popup-fab:hover,
.chat-popup-fab:focus {
    background-color: #4f5b6a;                  /* --color-tertiary-7 */
    border: 1px solid rgba(255, 255, 255, 0.5); /* --color-trans-white-5 */
    color: #ffffff;
}

.chat-popup-fab:active {
    background-color: #233245;                  /* --color-tertiary-9 */
    border: 1px solid rgba(255, 255, 255, 0.6); /* --color-trans-white-6 */
    color: #ffffff;
}

/* The literal fallback is what the launcher frame uses: it does not load
   site.css, where --safeut-light-blue is defined. */
.chat-popup-fab:focus-visible {
    outline: 3px solid var(--safeut-light-blue, #6DCFF6);
    outline-offset: 3px;
}

/* .gls-icon + .gls-margin-small-left */
.chat-popup-fab-chevron {
    display: inline-block;
    margin: 0 0 0 8px; /* --margin-small-margin */
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    background-color: transparent;
    color: inherit;
    fill: currentColor;
    line-height: 0;
}

/* Overrides Bootstrap's reboot; the baseline alignment sets the tab's thickness. */
.chat-popup-fab-chevron svg {
    vertical-align: baseline;
}

/* ── Unread badge on the launcher tab ────────────────────────
   Sits on the tab's top-left corner on screen. In the button's own
   (pre-rotation) axes that corner is top/right, and the digit is
   counter-rotated so it reads upright. */
/* The author `display` below beats the UA stylesheet's display:none for [hidden],
   so the attribute has to be honoured explicitly. <ChatPopupFab /> never renders
   the element at zero, but the launcher frame toggles it. */
.chat-popup-fab-badge[hidden] {
    display: none;
}

.chat-popup-fab-badge {
    position: absolute;
    top: -9px;
    right: -9px;
    transform: rotate(90deg);
    letter-spacing: normal;
    min-width: 1.55rem;
    height: 1.55rem;
    /* The top padding optically centres the digit, which has no descender. */
    padding: 0.16em 0.35rem 0;
    background: #d9303e;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    pointer-events: none;
}