/* HRConnect public support experience. Final presentation layer after Design System assets. */

body.qm-public-home :is(.hrc-support-launcher, .hrc-support-widget) {
    font-family: var(--hrc-font-sans);
}

body.qm-public-home .hrc-support-launcher {
    right: 22px;
    bottom: 22px;
    min-block-size: 52px;
    min-inline-size: 132px;
    padding: 0 var(--hrc-space-4) 0 var(--hrc-space-2);
    gap: var(--hrc-space-2);
    border: 1px solid color-mix(in srgb, var(--hrc-brand-700) 78%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-action-cta-start, var(--tcv-accent-solid));
    color: var(--hrc-action-on-primary, var(--tcv-on-accent));
    box-shadow: var(--hrc-shadow-md);
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
    touch-action: manipulation;
}

body.qm-public-home .hrc-support-launcher:hover {
    background: var(--hrc-action-cta-start-hover, var(--tcv-accent-solid));
    box-shadow: var(--hrc-shadow-lg);
    transform: translateY(-2px);
}

body.qm-public-home .hrc-support-launcher:active {
    transform: translateY(0);
}

body.qm-public-home .hrc-support-launcher:focus-visible,
body.qm-public-home .hrc-support-widget :is(button, label, input, textarea, a):focus-visible {
    outline: 3px solid var(--hrc-color-focus);
    outline-offset: 3px;
}

body.qm-public-home .hrc-support-launcher-icon {
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--hrc-neutral-0) 14%, transparent);
}

body.qm-public-home .hrc-support-launcher-icon svg,
body.qm-public-home .hrc-support-widget svg {
    display: block;
    inline-size: 22px;
    block-size: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

body.qm-public-home .hrc-support-launcher-label {
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: .01em;
}

body.qm-public-home .hrc-support-widget {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 1000;
    inline-size: min(420px, calc(100vw - 32px));
    block-size: min(660px, calc(100dvh - 112px));
    min-block-size: 420px;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-xl);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-lg);
    isolation: isolate;
    animation: hrc-support-enter 180ms ease-out both;
}

body.qm-public-home .hrc-support-widget > header {
    min-block-size: 76px;
    display: grid;
    grid-template-columns: 44px 48px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border-block-end: 1px solid var(--hrc-color-border);
    background: var(--hrc-color-surface-raised);
}

body.qm-public-home .hrc-support-widget > header .hrc-btn--icon,
body.qm-public-home .hrc-support-chat form :is(button, label) {
    inline-size: 44px;
    min-inline-size: 44px;
    block-size: 44px;
    min-block-size: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--hrc-radius-sm);
    background: transparent;
    color: var(--hrc-color-text-soft);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

body.qm-public-home .hrc-support-chat form label {
    position: relative;
    overflow: hidden;
}

body.qm-public-home .hrc-support-widget > header .hrc-btn--icon:hover,
body.qm-public-home .hrc-support-chat form :is(button, label):hover {
    border-color: var(--hrc-color-border);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text);
}

body.qm-public-home .hrc-support-agent {
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--hrc-brand-700) 24%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-brand-700);
}

body.qm-public-home .hrc-support-agent svg {
    inline-size: 26px;
    block-size: 26px;
}

body.qm-public-home .hrc-support-heading {
    min-inline-size: 0;
    display: grid;
    gap: 3px;
}

body.qm-public-home .hrc-support-heading strong {
    overflow: hidden;
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-md);
    font-weight: var(--hrc-weight-bold);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.qm-public-home .hrc-support-heading small {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    line-height: 1.35;
}

body.qm-public-home .hrc-support-heading small i {
    inline-size: 8px;
    block-size: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--hrc-color-success);
    box-shadow: 0 0 0 3px var(--hrc-color-success-soft);
}

body.qm-public-home .hrc-support-identity {
    min-block-size: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--hrc-space-3);
    padding: clamp(20px, 5vh, 38px) var(--hrc-space-6);
    overflow: auto;
    background: var(--hrc-color-surface);
}

body.qm-public-home .hrc-support-welcome {
    display: grid;
    justify-items: center;
    margin-block-end: var(--hrc-space-2);
    text-align: center;
}

body.qm-public-home .hrc-support-welcome-icon {
    inline-size: 64px;
    block-size: 64px;
    display: grid;
    place-items: center;
    margin-block-end: var(--hrc-space-3);
    border: 1px solid color-mix(in srgb, var(--hrc-brand-700) 22%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-brand-700);
}

body.qm-public-home .hrc-support-welcome-icon svg {
    inline-size: 30px;
    block-size: 30px;
}

body.qm-public-home .hrc-support-eyebrow {
    margin: 0 0 var(--hrc-space-1);
    color: var(--hrc-brand-700);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.qm-public-home .hrc-support-welcome h2 {
    margin: 0;
    color: var(--hrc-color-text);
    font-size: clamp(22px, 5vw, 26px);
    line-height: 1.2;
}

body.qm-public-home .hrc-support-welcome > p:last-child {
    max-inline-size: 32ch;
    margin: var(--hrc-space-2) 0 0;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
    line-height: 1.55;
}

body.qm-public-home .hrc-support-identity .hrc-field {
    display: grid;
    gap: 6px;
}

body.qm-public-home .hrc-support-identity .hrc-field > span {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.qm-public-home .hrc-support-identity input {
    inline-size: 100%;
    min-block-size: 48px;
    box-sizing: border-box;
    padding: 0 var(--hrc-space-3);
    border: 1px solid var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
}

body.qm-public-home .hrc-support-identity input:focus {
    border-color: var(--hrc-brand-700);
    outline: 0;
    box-shadow: var(--hrc-focus-ring);
}

body.qm-public-home .hrc-support-identity > [data-support-start] {
    min-block-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hrc-space-2);
    margin-block-start: var(--hrc-space-1);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-action-cta-start, var(--tcv-accent-solid));
    color: var(--hrc-action-on-primary, var(--tcv-on-accent));
    font-weight: var(--hrc-weight-bold);
}

body.qm-public-home .hrc-support-identity > [data-support-start]:hover {
    background: var(--hrc-action-cta-start-hover, var(--tcv-accent-solid));
}

body.qm-public-home .hrc-support-identity > [data-support-start] svg {
    inline-size: 18px;
    block-size: 18px;
}

body.qm-public-home .hrc-support-error {
    min-block-size: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hrc-color-danger);
    font-size: var(--hrc-text-xs);
    text-align: center;
}

body.qm-public-home .hrc-support-error:empty {
    display: none;
}

body.qm-public-home .hrc-support-error:not(:empty) {
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: 1px solid color-mix(in srgb, var(--hrc-color-danger) 28%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-danger-soft);
}

body.qm-public-home .hrc-support-chat {
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--hrc-color-surface-soft);
}

body.qm-public-home .hrc-support-messages {
    min-block-size: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: var(--hrc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--hrc-space-3);
    scrollbar-gutter: stable;
}

body.qm-public-home .hrc-widget-message {
    max-inline-size: 86%;
    display: flex;
    gap: var(--hrc-space-2);
    align-items: flex-end;
}

body.qm-public-home .hrc-widget-message.is-mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

body.qm-public-home .hrc-widget-avatar {
    inline-size: 30px;
    block-size: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--hrc-color-border);
    border-radius: 50%;
    background: var(--hrc-color-surface);
    color: var(--hrc-brand-700);
    font-size: 9px;
    font-weight: var(--hrc-weight-bold);
    letter-spacing: .02em;
}

body.qm-public-home .hrc-widget-message.is-mine .hrc-widget-avatar {
    border-color: color-mix(in srgb, var(--hrc-brand-700) 24%, var(--hrc-color-border));
    background: var(--hrc-color-brand-soft);
}

body.qm-public-home .hrc-widget-bubble {
    min-inline-size: 0;
    padding: 10px var(--hrc-space-3);
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md) var(--hrc-radius-md) var(--hrc-radius-md) var(--hrc-radius-xs);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
    word-break: break-word;
}

body.qm-public-home .hrc-widget-message.is-mine .hrc-widget-bubble {
    border-color: var(--hrc-action-cta-start, var(--tcv-accent-solid));
    border-radius: var(--hrc-radius-md) var(--hrc-radius-md) var(--hrc-radius-xs) var(--hrc-radius-md);
    background: var(--hrc-action-cta-start, var(--tcv-accent-solid));
    color: var(--hrc-action-on-primary, var(--tcv-on-accent));
}

body.qm-public-home .hrc-widget-bubble p {
    margin: 0;
    color: inherit;
    font-size: var(--hrc-text-sm);
    line-height: 1.5;
    white-space: pre-wrap;
}

body.qm-public-home .hrc-widget-bubble small {
    display: block;
    margin-block-start: 5px;
    color: inherit;
    font-size: 10px;
    line-height: 1.2;
    opacity: .72;
    text-align: end;
}

body.qm-public-home .hrc-widget-file {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-2);
    min-block-size: 36px;
    color: inherit;
    text-decoration: none;
}

body.qm-public-home .hrc-widget-file svg {
    inline-size: 20px;
    block-size: 20px;
    flex: none;
}

body.qm-public-home .hrc-widget-file img {
    display: block;
    max-inline-size: min(230px, 62vw);
    max-block-size: 200px;
    border-radius: var(--hrc-radius-sm);
}

body.qm-public-home .hrc-support-status,
body.qm-public-home .hrc-support-upload {
    flex: none;
    margin: 0 var(--hrc-space-3) var(--hrc-space-2);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    line-height: 1.4;
}

body.qm-public-home .hrc-support-status[data-state="error"] {
    border-color: color-mix(in srgb, var(--hrc-color-danger) 28%, var(--hrc-color-border));
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.qm-public-home .hrc-support-upload {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.qm-public-home .hrc-support-upload i {
    inline-size: 14px;
    block-size: 14px;
    flex: none;
    border: 2px solid var(--hrc-color-border-strong);
    border-block-start-color: var(--hrc-brand-700);
    border-radius: 50%;
    animation: hrc-support-spin .7s linear infinite;
}

body.qm-public-home .hrc-support-chat form {
    min-inline-size: 0;
    flex: none;
    margin: 0 var(--hrc-space-3) var(--hrc-space-3);
    padding: 6px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    border: 1px solid var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-xs);
}

body.qm-public-home .hrc-support-chat form:focus-within {
    border-color: var(--hrc-brand-700);
    box-shadow: var(--hrc-focus-ring);
}

body.qm-public-home .hrc-support-chat form label input {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
}

body.qm-public-home .hrc-support-chat form label:focus-within {
    outline: 3px solid var(--hrc-color-focus);
    outline-offset: 2px;
}

body.qm-public-home .hrc-support-chat textarea {
    min-inline-size: 0;
    min-block-size: 44px;
    max-block-size: 112px;
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 11px var(--hrc-space-2);
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--hrc-color-text);
    font: inherit;
    font-size: var(--hrc-text-sm);
    line-height: 1.45;
}

body.qm-public-home .hrc-support-chat textarea::placeholder {
    color: var(--hrc-color-text-muted);
}

body.qm-public-home .hrc-support-chat form button[type="submit"] {
    border-color: var(--hrc-action-cta-start, var(--tcv-accent-solid));
    background: var(--hrc-action-cta-start, var(--tcv-accent-solid));
    color: var(--hrc-action-on-primary, var(--tcv-on-accent));
}

body.qm-public-home .hrc-support-chat form button[type="submit"]:hover {
    border-color: var(--hrc-action-cta-start-hover, var(--tcv-accent-solid));
    background: var(--hrc-action-cta-start-hover, var(--tcv-accent-solid));
    color: var(--hrc-action-on-primary, var(--tcv-on-accent));
}

body.qm-public-home .hrc-support-widget button:disabled {
    cursor: wait;
    opacity: .68;
}

body.qm-public-home .hrc-support-emojis {
    position: absolute;
    left: var(--hrc-space-3);
    bottom: 76px;
    z-index: 3;
    max-inline-size: calc(100% - 24px);
    padding: var(--hrc-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-1);
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-raised);
    box-shadow: var(--hrc-shadow-md);
}

body.qm-public-home .hrc-support-emojis button {
    inline-size: 42px;
    block-size: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--hrc-radius-sm);
    background: transparent;
    font-size: 21px;
    cursor: pointer;
}

body.qm-public-home .hrc-support-emojis button:hover {
    background: var(--hrc-color-surface-soft);
}

body.qm-public-home .hrc-support-widget[hidden],
body.qm-public-home .hrc-support-widget [hidden],
body.qm-public-home .hrc-support-launcher [hidden] {
    display: none !important;
}

@keyframes hrc-support-enter {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hrc-support-spin {
    to { transform: rotate(1turn); }
}

@media (max-width: 767px) {
    body.qm-public-home .hrc-support-launcher {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        inline-size: 56px;
        min-inline-size: 56px;
        block-size: 56px;
        min-block-size: 56px;
        display: grid;
        place-items: center;
        gap: 0;
        padding: 0;
        border-radius: 50%;
    }

    body.qm-public-home .hrc-support-launcher-icon {
        inline-size: 32px;
        block-size: 32px;
        background: transparent;
    }

    body.qm-public-home .hrc-support-launcher-icon svg {
        inline-size: 28px;
        block-size: 28px;
    }

    body.qm-public-home .hrc-support-launcher-label {
        display: none;
    }

    body.qm-public-home .hrc-support-widget {
        inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        inline-size: auto;
        block-size: auto;
        min-block-size: 0;
        border-radius: var(--hrc-radius-lg);
    }

    body.qm-public-home .hrc-support-widget > header {
        min-block-size: 68px;
        grid-template-columns: 44px 44px minmax(0, 1fr) 44px;
        padding: var(--hrc-space-2) var(--hrc-space-3);
    }

    body.qm-public-home .hrc-support-agent {
        inline-size: 44px;
        block-size: 44px;
    }

    body.qm-public-home .hrc-support-identity {
        justify-content: flex-start;
        padding: clamp(18px, 5vh, 30px) var(--hrc-space-5);
    }

    body.qm-public-home .hrc-support-messages {
        padding: var(--hrc-space-3);
    }

    body.qm-public-home .hrc-support-chat form {
        margin-inline: var(--hrc-space-2);
        margin-block-end: max(var(--hrc-space-2), env(safe-area-inset-bottom));
    }

    body.hrc-support-open {
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    body.qm-public-home .hrc-support-widget {
        inset: 0;
        inline-size: 100%;
        block-size: 100dvh;
        border: 0;
        border-radius: 0;
    }

    body.qm-public-home .hrc-support-widget > header {
        padding-block-start: max(var(--hrc-space-2), env(safe-area-inset-top));
        padding-inline: max(var(--hrc-space-2), env(safe-area-inset-left)) max(var(--hrc-space-2), env(safe-area-inset-right));
    }

    body.qm-public-home .hrc-support-heading small span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.qm-public-home .hrc-support-identity {
        padding-inline: var(--hrc-space-5);
    }

    body.qm-public-home .hrc-widget-message {
        max-inline-size: 90%;
    }

    body.qm-public-home .hrc-support-chat form :is(button, label) {
        inline-size: 42px;
        min-inline-size: 42px;
        block-size: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.qm-public-home .hrc-support-launcher,
    body.qm-public-home .hrc-support-widget,
    body.qm-public-home .hrc-support-upload i {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}