/* Public chrome: no-JS support hatch shell (toggle, panel, head, tools). */
/* Sequential part 475-735 of the former chrome.css; load order in website/includes/header.php must be preserved. */

.help-hatch {
    position: fixed;
    inset-inline-end: 0.75rem;
    inset-block-end: 0.75rem;
    z-index: 9010;
    color: var(--copy-bright);
}

.help-hatch[open] { inline-size: calc(100vw - 1.5rem); }
.help-hatch__toggle {
    position: relative;
    display: grid;
    grid-template-columns: 2rem auto;
    inline-size: max-content;
    min-block-size: 2.875rem;
    align-items: center;
    gap: 0.5625rem;
    margin-inline-start: auto;
    padding: 0.375rem 0.75rem 0.375rem 0.4375rem;
    color: var(--copy-bright);
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.38);
    border-radius: 999rem 999rem 0.75rem 999rem;
    background: linear-gradient(115deg, rgba(var(--flare-rgb), 0.11), transparent 52%), #17191e;
    box-shadow: 0 1rem 2.375rem rgba(0, 0, 0, 0.35), inset 0 0.0625rem rgba(255, 255, 255, 0.05);
    cursor: pointer;
    list-style: none;
    transition: translate 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.help-hatch:not([open]) .help-hatch__toggle:hover {
    translate: 0 -0.125rem;
    border-color: rgba(var(--flare-rgb), 0.72);
}

.help-hatch__toggle-icon {
    position: relative;
    display: grid;
    inline-size: 2rem;
    block-size: 2rem;
    place-items: center;
    color: #241006;
    border-radius: 50%;
    background-color: var(--flare);
    box-shadow: none;
}

.help-hatch__chat-glyph {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    background: center / contain no-repeat url("data:image/png;base64,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");
}

.help-hatch__toggle-copy {
    display: grid;
    min-inline-size: 0;
    gap: 0.0625rem;
    text-align: start;
}

.help-hatch__toggle-copy strong { font-size: 0.75rem; font-weight: 850; line-height: 1.1; }
.help-hatch__toggle-copy small,
.help-hatch__head-copy p {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    color: var(--copy-dim);
    font-size: 0.5625rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.help-hatch__toggle-copy small::before,
.help-hatch__head-copy p span {
    inline-size: 0.3125rem;
    block-size: 0.3125rem;
    border-radius: 50%;
    content: "";
    background-color: var(--healthy);
    box-shadow: 0 0 0 0.1875rem rgba(83, 213, 152, 0.11);
}

.help-hatch__badge {
    position: absolute;
    inset-inline-end: -0.3125rem;
    inset-block-start: -0.375rem;
    display: grid;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    place-items: center;
    padding-inline: 0.3125rem;
    color: #fff;
    border: 0.125rem solid #17191e;
    border-radius: 999rem;
    background-color: var(--alert);
    font-size: 0.5625rem;
    font-weight: 900;
}

.help-hatch[open] .help-hatch__badge { display: none; }
.help-hatch[open] .help-hatch__toggle {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-end: 0.625rem;
    z-index: 3;
    grid-template-columns: 1fr;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    min-block-size: 1.875rem;
    margin: 0;
    padding: 0;
    place-items: center;
    color: var(--copy-soft);
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
}

.help-hatch[open] .help-hatch__toggle-copy { display: none; }
.help-hatch[open] .help-hatch__toggle-icon {
    inline-size: 100%;
    block-size: 100%;
    color: currentColor;
    background: none;
    box-shadow: none;
}

.help-hatch[open] .help-hatch__toggle-icon::before,
.help-hatch[open] .help-hatch__toggle-icon::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0.875rem;
    block-size: 0.125rem;
    border: 0;
    border-radius: 999rem;
    content: "";
    background-color: currentColor;
}

.help-hatch[open] .help-hatch__toggle-icon::before { transform: translateX(-50%) rotate(45deg); }
.help-hatch[open] .help-hatch__toggle-icon::after { transform: translateX(-50%) rotate(-45deg); }
.help-hatch[open] .help-hatch__chat-glyph { display: none; }
.help-hatch__panel {
    display: flex;
    inline-size: 100%;
    block-size: calc(100vh - 1.5rem);
    max-block-size: calc(100vh - 1.5rem);
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    overflow: hidden;
    border: 0.0625rem solid rgba(255, 255, 255, 0.09);
    border-radius: 1.375rem 1.375rem 0.5rem 1.375rem;
    background: radial-gradient(circle at 8% 0%, rgba(var(--flare-rgb), 0.12), transparent 32%), linear-gradient(165deg, #1a1c21, #111318 62%);
    box-shadow: 0 1.625rem 4.375rem rgba(0, 0, 0, 0.48), inset 0 0.0625rem rgba(255, 255, 255, 0.04);
}

@supports (height: 100dvh) {
    .help-hatch__panel { block-size: calc(100dvh - 1.5rem); max-block-size: calc(100dvh - 1.5rem); }
}

.help-hatch__head {
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr);
    min-block-size: 2.125rem;
    align-items: center;
    gap: 0.5625rem;
    padding-inline-end: 2rem;
}

.help-hatch__head h2,
.help-hatch__head p { margin: 0; }
.help-hatch__head h2 { font-size: 0.875rem; font-weight: 850; line-height: 1.15; }
.help-hatch__head-copy p { margin-block-start: 0.125rem; gap: 0.375rem; }
.help-hatch__seal,
.help-hatch__key-icon {
    display: grid;
    inline-size: 2.125rem;
    block-size: 2.125rem;
    place-items: center;
    color: #241006;
    border-radius: 0.625rem 0.625rem 0.25rem 0.625rem;
    background-color: var(--flare);
    font-weight: 900;
}

.help-hatch__headset-glyph {
    position: relative;
    box-sizing: border-box;
    display: block;
    inline-size: 1.125rem;
    block-size: 1rem;
    border: 0.125rem solid currentColor;
    border-block-end: 0;
    border-radius: 0.625rem 0.625rem 0 0;
}

.help-hatch__headset-glyph::before {
    position: absolute;
    inset-block-start: 0.4375rem;
    inset-inline-start: -0.25rem;
    inline-size: 0.25rem;
    block-size: 0.5rem;
    border-radius: 0.125rem;
    content: "";
    background-color: currentColor;
    box-shadow: 1.125rem 0 0 currentColor;
}

.help-hatch__headset-glyph::after {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-end: -0.0625rem;
    box-sizing: border-box;
    inline-size: 0.5625rem;
    block-size: 0.375rem;
    border-inline-end: 0.125rem solid currentColor;
    border-block-end: 0.125rem solid currentColor;
    border-radius: 0 0 0.3125rem 0;
    content: "";
}

.help-hatch__tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.875rem;
    min-block-size: 2.125rem;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.5rem 0.4375rem 0.625rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.06);
    border-radius: 0.625rem;
    background-color: rgba(255, 255, 255, 0.025);
}

.help-hatch__tools p {
    min-inline-size: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--copy-dim);
    font-size: 0.5625rem;
    line-height: 1.3;
}

.help-hatch__reload {
    display: grid;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    place-items: center;
    color: var(--flare);
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.2);
    border-radius: 0.5rem;
    background-color: rgba(var(--flare-rgb), 0.07);
    font-size: 1rem;
    text-decoration: none;
}