/* =========================================================================
   Support desk — the header help button and the panel it drops.

   Twins the bell (notifications.css): the button opts into the shared
   --header-control-* liquid-glass palette by carrying .global-header-btn. The panel
   itself is local — it is the one overlay in the app that is neither a drawer
   nor a modal, and its box is written here rather than inherited — but its
   head is still the shared .global-drawer-head, so the way out of it is the way out
   of everything else. Everything is namespaced under .support-* so it cannot
   cancel — or be cancelled by — the app's global .card / .form-control styles.
   ========================================================================= */

.support-desk {
    display: inline-flex;
    align-items: center;
}

/* ============================ The float ============================ */

/* The clip. Fixed to the viewport, starting at the top bar's own bottom edge
   (--drawer-top — the one place that offset is computed) and running to the
   floor, with everything above that line cut off.

   That single rule is what makes the panel look like it comes OUT of the bar
   instead of sliding over it: a closed panel is parked above the cut, so it is
   not hidden behind the bar, it is not painted at all. The same box is what
   the drag clamps against (support_button.html), which keeps the panel from
   being shoved somewhere it can never be grabbed back from.

   pointer-events: none because this layer covers the whole page. The panel
   inside turns them back on for itself; nothing else in here is clickable.

   The rung is --z-modal, the same one the drawer sat on, and the partial this
   ships inside settles the rest: .global-app-header is position: sticky with
   z-index 1050, so it is its own stacking context and everything in here
   paints inside it — over the sidebar and the page, under a real modal. */
.support-float {
    position: fixed;
    top: var(--drawer-top);
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--z-modal);

    /* Support wears the PLATFORM, not the tenant. A ticket goes to SkillBridge,
       not to the org whose page it was filed from, so the popup that files it
       reads the same on every tenant instead of in that tenant's fill — the
       same call main.css already makes for the profile-photo nudge (.global-btn-ink):
       an account-level fact carries the platform ink rather than the org's.

       The re-point lives on the clip rather than on .support-panel because the
       clip is the one ancestor of BOTH halves of the popup — the panel and the
       screenshot editor, which is a sibling of the panel, not a child of it
       (it has to be: a transform on .support-panel would trap the editor's
       position: fixed inside it). Custom properties inherit, so scoping the
       brand family here covers anything in the popup that reaches for a brand
       token — today the plain link color main.css gives every `a`, tomorrow
       whatever a shared partial brings in with it.

       --color-neutral-ink is the platform fill and branding.py never writes
       it, so the org's inline :root style block cannot reach these values.
       Every tenant sets primary/secondary (Roman Roads navy, Fortis pure
       black), so this is a live change on all of them, not a theoretical one.

       --brand-accent is deliberately NOT re-pointed: nothing in the popup
       reads it, and the platform's default accent has no token name to point
       back at, so aliasing it to the ink would assert an accent is the primary
       when it is not. It gets a name the day something in here needs one.

       Typography stops at the face. --font-family is the whole live font leak
       (Fortis is the only tenant setting a body font); the body weight, style,
       transform and letter-spacing tokens are org typography taste that no
       tenant currently moves off the defaults, so they are left inherited
       rather than walled off against a leak nobody has. */
    --brand-primary: var(--color-neutral-ink);
    --brand-secondary: var(--color-neutral-ink);
    --brand-highlight: var(--color-neutral-ink);
    --brand-primary-fg: var(--color-neutral-ink-fg);
    --brand-secondary-fg: var(--color-neutral-ink-fg);
    --brand-highlight-fg: var(--color-neutral-ink-fg);
    /* Flat, not --color-neutral-ink-hover: that token is a color-mix, and on a
       pre-2023 engine a var() resolving to an unsupported color-mix is invalid
       at computed-value time, blanking whatever property took it. .global-btn-ink
       handles its own hover behind an @supports gate; this is only the floor
       for stray brand consumers, so it degrades legibly instead. */
    --brand-primary-hover: var(--color-neutral-ink);
    --brand-primary-on-page-bg: var(--color-neutral-ink);
    --brand-primary-on-card-bg: var(--color-neutral-ink);
    --font-family: var(--platform-font-family);
}

/* The panel. Absolute inside the clip, so its resting place is expressed
   against the clip and the drag can move it by writing left/top in px.

   --support-lift is how far a closed panel has to travel to clear the clip's
   ceiling: its own height, plus wherever it was last left, plus a little air.
   The drag keeps it in step with `top`. Without it, a panel shoved to the
   floor would "close" by sliding up to the middle of the screen and stopping
   there, in full view.

   The closed state IS the base state — a panel nobody has opened must not
   paint — and `visibility` is what takes it out of the tab order and the
   accessibility tree as well as off the screen. It flips at the END of the
   slide out and at the START of the slide in, which is what the two different
   delays are for. SUPPORT_SLIDE_MS in support_button.html mirrors the 320ms;
   the capture flow waits it out so a screenshot is taken with the panel really
   gone. Keep the two in step. */
.support-panel {
    --support-lift: 10px;
    position: absolute;
    top: 10px;
    right: 14px;
    display: flex;
    flex-direction: column;
    width: 372px;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 20px);
    overflow: hidden;
    pointer-events: auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    transform: translateY(calc(-100% - var(--support-lift) - 16px));
    opacity: 0;
    visibility: hidden;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 180ms ease-out,
                visibility 0s linear 320ms;
}

.support-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 180ms ease-out,
                visibility 0s;
}

/* The panel takes focus on open so Escape has somewhere to land, but it is a
   container, not a control — a ring around the whole card would be the loudest
   thing on screen. The X and everything inside keep their own. */
.support-panel:focus {
    outline: none;
}

/* ── The handle ── the title bar doubles as the grab. The grip is a
   pseudo-element so the shared head partial stays exactly as every other panel
   in the app writes it, and touch-action: none so a drag drags instead of
   scrolling the page underneath. */
.support-panel__grab {
    position: relative;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.support-panel__grab:active {
    cursor: grabbing;
}

/* Sits in the head's own top gutter, above the title — the one mark that says
   this bar is a handle before anyone tries it. */
.support-panel__grab::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 28px;
    height: 3px;
    transform: translateX(-50%);
    background: var(--color-border);
    border-radius: var(--radius-pill);
}

/* Fills the rest of the panel and scrolls on its own, so the head stays put at
   the top and the send shelf at the bottom while a long report scrolls between
   them. min-height: 0 because a flex child's default floor is its content —
   without it the body refuses to shrink and the shelf is pushed off the box. */
.support-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-md);
}

/* ── Docked ── below this width the panel stops floating. A thumb drag fights
   the page scroll, and a window you have to shove is worse than one that
   already knows where it goes: the drop out of the bar stays, the drag goes,
   and the panel spans the width inside an 8px gutter. SUPPORT_DOCK_QUERY in
   support_button.html mirrors this breakpoint — keep the two in step.

   !important because the drag writes left/top as inline styles. A window
   narrowed after a drag would otherwise leave the panel parked wherever the
   pointer last put it, at a width the screen no longer has. */
@media (max-width: 767.98px) {
    /* The clip stops at the bottom bar, and the panel becomes a sheet that
       rises out of the clip's FLOOR instead of dropping from its ceiling:
       the bar it belongs to is at the bottom now. .is-open's translateY(0)
       already outranks this closed transform. */
    .support-float {
        bottom: var(--bottom-bar-h);
    }

    .support-panel {
        top: auto !important;
        right: 0 !important;
        bottom: 0;
        left: 0 !important;
        width: auto;
        max-width: none;
        max-height: calc(100% - var(--spacing-md));
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-none) var(--radius-none);
        transform: translateY(100%);
    }

    .support-panel__grab {
        cursor: default;
        touch-action: auto;
    }

    /* Nothing to grab, so nothing that says grab me. */
    .support-panel__grab::before {
        display: none;
    }
}

/* The panel still goes away, it just stops travelling to get there. Both
   selectors, because .is-open outranks the base rule. */
@media (prefers-reduced-motion: reduce) {
    .support-panel,
    .support-panel.is-open {
        transition: none;
    }
}

/* ============================= The form ============================= */

/* ── The quick pick ── the platform segmented control, bare. The label that
   used to stand over it is gone: three buttons that each name a kind of
   report say it themselves, and the group keeps its accessible name on
   aria-label instead (support_button.html). */

.support-quick {
    margin-bottom: var(--spacing-xs);
}

/* The shared control sizes to its content; the drawer wants the whole row,
   split evenly (--equal does the splitting once there is width to split). */
.support-quick__seg {
    width: 100%;
}

/* ── The add tiles ── the shared list-growing tile (components/add-tile.css),
   layout only: collapsed tiles stack with air between, and the bands they
   open into carry the same top margin so the rhythm holds either way. */
.support-panel .global-add-tile {
    margin-top: var(--spacing-smd);
}

/* ── The bands ── the bordered slot a tile opens into, the opp form's
   Event/Location reveal drawn in the drawer's own vocabulary. */
.support-band {
    margin-top: var(--spacing-smd);
    padding: var(--spacing-smd);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.support-band__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.support-band__label {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Inside a band the head row already spaces the slot. */
.support-band .support-shot {
    margin-top: 0;
}

.support-field__input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-smd);
    font-size: var(--font-size-md);
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    resize: vertical;
}

.support-field__input:focus {
    outline: none;
    border-color: var(--color-neutral-ink);
    box-shadow: var(--shadow-focus-ring);
}

/* ── The send shelf ── pinned under the scrolling body, so the one control
   that finishes the job never scrolls away under a long comment. The shelf
   goes whole on a sent ticket (support_button.html): with the form gone there
   is nothing left to send, and a live button under a receipt only invites a
   second copy of the same report. */
.support-panel__foot {
    flex-shrink: 0;
    padding: var(--spacing-smd) var(--spacing-md) var(--spacing-md);
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border-subtle);
}

/* The button itself is still the same slab as Add Comment and Add Screenshot,
   which is what Nick asked for and what TestSendMatchesTheTiles freezes. Every
   box metric here is .global-add-tile's (components/add-tile.css): the
   md/mdlg padding pair, 0.95rem text, the 1.5px hairline, the large-panel
   corner.
   Bootstrap's --bs-btn-* vars carry them instead of raw padding/border
   declarations, so the .btn box stays the one thing sizing the button and
   nothing here has to out-specify it. The tiles' 0.75rem of air above is the
   shelf's own top padding now.

   Line height needs no override: .btn pins --bs-btn-line-height to 1.5 and the
   tile inherits the same 1.5 from body, so both compute 0.95rem x 1.5 = 22.8px
   and the two boxes land on the same height. Weight is deliberately NOT
   matched — real buttons read --font-weight-button (main.css) as the one fixed
   source no tenant brand-config can pull apart, and copying the tile's 500
   here would have quietly forked it for one button.

   Flex because the content is two boxes now (headset + label) that centre as a
   pair; the .btn default would only centre the text.

   Colour is NOT restated here any more. This rule used to carry the whole
   brand palette again, because the drawer is included from the header partial
   and so lives INSIDE .global-app-header, where `.global-app-header .btn-primary` re-pointed
   every button at the header's glass palette (white on translucent white —
   right on the dark bar, invisible on a white panel). #5390 deleted that
   descendant rule, which left nine declarations restating exactly what
   main.css's own `.btn-primary` already sets, guarded against a selector that
   no longer exists. main.css loads after Bootstrap and nothing under
   .global-app-header touches .btn-primary now, so `.btn-primary` alone is the
   palette. If a header-scoped button rule ever comes back, fix it there — the
   drawer is not the only thing that would be wearing glass. */
.support-panel .support-panel__send.btn {
    --bs-btn-padding-y: var(--spacing-md);
    --bs-btn-padding-x: var(--spacing-mdlg);
    --bs-btn-font-size: 0.95rem;
    --bs-btn-border-width: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
}

/* Matches .global-add-tile i exactly — same size, same flattened line box, so
   the three glyphs in the stack sit on one optical line. */
.support-panel .support-panel__send.btn i {
    font-size: 1.05rem;
    line-height: 1;
}

/* Above the button, not under it: the shelf ends at the send, and a refusal
   printed below it would sit on the panel's bottom edge. */
.support-panel__error {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

/* =========================== Screenshot =========================== */

.support-shot {
    margin-top: var(--spacing-smd);
}

/* A dashed slot rather than a solid button: it reads as "something can go
   here", which is what an optional attachment is. */
.support-shot__take {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-smd);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.support-shot__take:hover {
    color: var(--color-neutral-ink);
    border-color: var(--color-neutral-ink);
    background: color-mix(in srgb, var(--color-neutral-ink) 6%, transparent);
}

.support-shot__preview {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.support-shot__thumb {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.support-shot__meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.support-shot__name {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.support-shot__drop {
    align-self: flex-start;
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.support-shot__drop:hover {
    color: var(--color-text);
}

.support-shot__note {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ============================ The receipt ============================ */

.support-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xsm);
    padding: var(--spacing-2xl) var(--spacing-md);
}

.support-done__mark {
    font-size: 2rem;
    color: var(--color-success);
}

.support-done__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* ==================== Screenshot actions ==================== */

/* The thumbnail is itself a button into the markup editor. */
.support-shot__open {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.support-shot__actions {
    display: inline-flex;
    gap: var(--spacing-smd);
}

/* Same quiet link look as the Remove button beside it. */
.support-shot__edit {
    align-self: flex-start;
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.support-shot__edit:hover {
    color: var(--color-text);
}

/* ======================= Markup editor ======================= */

/* A full-screen room to draw in. Deliberately dark in every theme: it is a
   picture-editing scrim, and the picture supplies the light. Sits above the
   panel (--z-modal) even though the panel slides away while this is open.
   --support-ink mirrors SUPPORT_INK in support_button.html — the toolbar and
   the canvas wear the same red; keep the two in step. */
.support-markup {
    --support-ink: rgba(229, 72, 77, 1);
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-top);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-md) var(--spacing-mdlg) var(--spacing-smd);
    background: rgba(10, 13, 16, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* The controls ride in one glass pill. */
.support-markup__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    max-width: 100%;
    padding: var(--spacing-xsm) var(--spacing-sm);
    background: rgba(23, 27, 32, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-modal);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.support-markup__tools,
.support-markup__fixes,
.support-markup__ends {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
}

.support-markup__ends {
    gap: var(--spacing-xsm);
}

.support-markup__split {
    width: 1px;
    height: 1.25rem;
    background: rgba(255, 255, 255, 0.16);
}

.support-markup__tool,
.support-markup__fix,
.support-markup__cancel {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    padding: var(--spacing-sm) var(--spacing-smd);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.82);
    background: none;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.support-markup__tool:hover,
.support-markup__fix:hover,
.support-markup__cancel:hover {
    color: var(--color-neutral-ink-fg);
    background: rgba(255, 255, 255, 0.1);
}

/* The active tool wears the ink. */
.support-markup__tool--on,
.support-markup__tool--on:hover {
    color: var(--color-neutral-ink-fg);
    background: var(--support-ink);
}

.support-markup__done {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(18, 22, 26, 0.95);
    background: var(--color-neutral-ink-fg);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: opacity 120ms ease;
}

.support-markup__done:hover {
    opacity: 0.9;
}

.support-markup__stage {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* touch-action: none — drawing with a finger must draw, not scroll. */
.support-markup__canvas {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
    cursor: crosshair;
    touch-action: none;
}

.support-markup__hint {
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    background: rgba(23, 27, 32, 0.8);
    border-radius: var(--radius-pill);
    text-align: center;
    transition: opacity 400ms ease;
}

/* The first mark proves the hint landed; it bows out. */
.support-markup__hint--fade {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .support-markup {
        animation: support-markup-in 160ms ease-out;
    }

    .support-markup__canvas {
        animation: support-canvas-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
    }
}

@keyframes support-markup-in {
    from {
        opacity: 0;
    }
}

@keyframes support-canvas-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
}