/*--------------------------------------------------------------
# Action-dock help panel  (markup: r.html #helpPanel, logic: js/actionHelp.js)
#
# Right-hand drawer explaining the footer toolbar. Dark glass to match the dock and the
# top bar it documents, so it reads as part of the app chrome rather than page content.
# Loaded after conference.css, which is what lets these rules win over the global
# `input` and `.hidden` declarations there.
--------------------------------------------------------------*/

#helpPanel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: 92vw;
    /* stop short of the toolbar: the dock is centred and can reach this far right on smaller
       desktops, and it must stay clickable (and visible for the locate pulse) while open */
    bottom: 74px;
    background: linear-gradient(180deg, rgb(28 37 61 / 97%) 0%, rgb(20 27 46 / 97%) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 1px solid rgb(255 255 255 / 8%);
    border-radius: 16px 0 0 16px;
    box-shadow: -18px 0 44px rgb(0 0 0 / 38%);
    overflow: hidden;
    /* slide, rather than animating `right`, so it stays smooth over live video */
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

#helpPanel.open {
    transform: translateX(0);
    pointer-events: auto;
}

/* --- header --- */

.help-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    background: linear-gradient(135deg, rgb(37 49 80 / 95%) 0%, rgb(24 32 53 / 95%) 100%);
    border-bottom: 1px solid rgb(255 255 255 / 7%);
    flex-shrink: 0;
}

.help-panel__badge {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a86d8 0%, #44598f 100%);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 4px 12px rgb(68 89 143 / 45%);
}

.help-panel__heading {
    flex: 1;
    min-width: 0;
}

.help-panel__heading h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.help-panel__heading span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: #93a2c4;
    line-height: 1.3;
}

.help-panel__close {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgb(255 76 76);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.help-panel__close:hover {
    background-color: rgb(226 55 55);
    transform: rotate(90deg);
}

.help-panel__close i {
    color: #fff;
    font-size: 12px;
}

/* --- search --- */

.help-panel__search {
    position: relative;
    padding: 12px 16px 4px;
    flex-shrink: 0;
}

.help-panel__search i {
    position: absolute;
    left: 28px;
    /* centred on the input's own box (top matches the container's top padding), not on the
       container, whose padding is deliberately lopsided */
    top: 12px;
    height: 34px;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #76839f;
    pointer-events: none;
}

/* conference.css styles every input globally with !important, so match it here */
#helpPanelSearch {
    width: 100%;
    margin-top: 0 !important;
    padding: 8px 12px 8px 30px;
    font-size: 12.5px;
    background-color: rgb(255 255 255 / 6%) !important;
    border: 1px solid rgb(255 255 255 / 10%) !important;
    border-radius: 20px !important;
    color: #e8edf8 !important;
}

#helpPanelSearch::placeholder {
    color: #76839f;
}

#helpPanelSearch:focus {
    border-color: rgb(106 134 216 / 70%) !important;
    background-color: rgb(255 255 255 / 9%) !important;
}

/* --- list --- */

.help-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 12px 18px;
}

.help-panel__body::-webkit-scrollbar {
    width: 6px;
}

.help-panel__body::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 14%);
    border-radius: 3px;
}

.help-group {
    display: block;
}

.help-group.hidden {
    display: none;
}

.help-group__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 6px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7f8db0;
}

.help-group__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgb(255 255 255 / 8%);
}

.help-row {
    width: 100%;
    display: grid;
    grid-template-columns: 34px 1fr 14px;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    background: transparent;
    border: 0;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.12s ease;
}

.help-row.hidden {
    display: none;
}

.help-row:hover {
    background-color: rgb(255 255 255 / 6%);
}

.help-row:active {
    transform: scale(0.985);
}

.help-row:focus-visible {
    outline: 2px solid rgb(106 134 216 / 80%);
    outline-offset: 1px;
}

/* mini-replica of the real dock button — colours are copied in by actionHelp.js */
.help-row__chip {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    color: #333;
    font-size: 13px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 28%);
}

.help-row__chip i {
    font-size: 13px;
    line-height: 1;
}

.help-row__chip svg {
    width: 18px;
    height: 18px;
}

.help-row__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.help-row__label {
    font-size: 13px;
    font-weight: 600;
    color: #eef2fb;
    line-height: 1.25;
}

.help-row__desc {
    font-size: 11.5px;
    color: #9aa8c8;
    line-height: 1.45;
}

.help-row__locate {
    justify-self: end;
    font-size: 11px;
    color: #6d7b9c;
    opacity: 0.45;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.help-row:hover .help-row__locate {
    opacity: 1;
    color: #8ea6e8;
}

.help-panel__empty {
    margin: 0;
    padding: 26px 8px;
    text-align: center;
    font-size: 12px;
    color: #8b98b8;
}

.help-panel__empty.hidden {
    display: none;
}

.help-panel__foot {
    display: flex;
    gap: 8px;
    margin: 16px 6px 0;
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 7%);
    font-size: 11px;
    line-height: 1.5;
    color: #7f8db0;
}

.help-panel__foot i {
    margin-top: 2px;
    color: #6a86d8;
}

/* --- the Help trigger: floating pill, bottom-right ---
   Solid brand blue, not the dock's dark glass: this button has to be found against whatever the
   room happens to be — a light marble floor, a dark floor, or someone's shared screen — and dark
   glass disappears into the dark ones. Carries the word "Help" rather than a lone glyph so nobody
   has to guess. Sits below the open panel (which stops at 74px) so it stays visible and
   clickable while the panel is up. */

#helpFloatingBtn {
    position: fixed;
    bottom: 14px;
    right: 16px;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px 0 7px;
    background: linear-gradient(135deg, #6a86d8 0%, #44598f 100%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 20px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 6px 18px rgb(20 30 60 / 45%);
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#helpFloatingBtn.hidden {
    display: none;
}

#helpFloatingBtn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgb(20 30 60 / 55%);
}

#helpFloatingBtn i {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 20%);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

/* panel open — go dark so the trigger reads as "on", and stops competing with the blue panel
   badge sitting right above it. !important because .activeControl in conference.css uses it. */
#helpFloatingBtn.activeControl {
    background: rgb(24 32 53 / 94%) !important;
    border-color: rgb(255 255 255 / 18%) !important;
}

/* On touch devices actionHelp.js re-parents the button into the always-visible mobile menu bar,
   because there the expanded dock wraps across the whole bottom of the screen. Keyed off that
   parent rather than a breakpoint, so the styling follows the DOM move exactly.

   Deliberately minimal: `#actionButtonMobileMenu button` in conference.css already sizes, colours
   and shadows every button in that bar, and being (id + type) it outranks the plain-id rules
   above — so the help button picks up the bar's own circle for free, at whatever size the
   breakpoint says (36x35, or 40x40 under 767px). Overriding size here is what made it an odd
   one out. All that is left to undo is the two things the bar never sets: the fixed corner
   placement, and `display: flex` — which is block-level and pushed the button onto its own
   line underneath the bar instead of sitting in the row. */
#actionButtonMobileMenu #helpFloatingBtn {
    position: static;
    display: inline-block;
    margin-left: 10px;
}

/* Back to a plain inline glyph like every other icon in the bar: the pill's flex disc would
   otherwise sit at the top of the button box instead of centring in the circle. */
#actionButtonMobileMenu #helpFloatingBtn i {
    display: inline;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: #333;
    font-size: inherit;
}

#actionButtonMobileMenu #helpFloatingBtn.activeControl i {
    color: #fff;
}

/* A tablet wide enough to miss the 1199px breakpoint still lands in this bar — never let the
   word "Help" widen a circular button. */
#actionButtonMobileMenu .help-fab__label {
    display: none;
}

/* A host's dock is wide enough to reach this corner on a smaller laptop, so drop the word and
   keep only the disc — 36px can always be tucked beside it. */
@media only screen and (max-width: 1199px) {
    #helpFloatingBtn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }

    .help-fab__label {
        display: none;
    }
}

/* --- "show me where it is": pulse the real button --- */

@keyframes helpLocatePulse {
    0% {
        box-shadow: 0 0 0 0 rgb(102 189 32 / 85%);
        transform: scale(1);
    }
    45% {
        box-shadow: 0 0 0 10px rgb(102 189 32 / 0%);
        transform: scale(1.22);
    }
    100% {
        box-shadow: 0 0 0 0 rgb(102 189 32 / 0%);
        transform: scale(1);
    }
}

.help-locate {
    animation: helpLocatePulse 0.9s ease-out 2;
    position: relative;
    z-index: 2;
}

/* --- mobile --- */

@media only screen and (max-width: 767px) {
    #helpPanel {
        width: 100%;
        max-width: 100%;
        /* the mobile dock wraps to several rows, so no fixed inset would reliably clear it —
           cover the screen instead and step aside when a row is tapped (see locateButton) */
        bottom: 0;
        border-radius: 0;
        border-left: 0;
    }

    .help-panel__body {
        padding-bottom: 90px;
    }

    .help-row {
        padding: 11px 8px;
    }

    .help-row__label {
        font-size: 13.5px;
    }

    .help-row__desc {
        font-size: 12px;
    }

    .help-fab__label {
        display: none;
    }
}