.in3d-support {
    --support-bg: #fff;
    --support-field: #f3f8f6;
    --support-border: #c7ddd6;
    --support-text: #173c35;
    --support-muted: #456961;
    --support-accent: #087e76;
    --support-on-accent: #fff;
}

.in3d-support[data-dark] {
    color-scheme: dark;
    --support-bg: #162b28;
    --support-field: #1e3833;
    --support-border: #41645b;
    --support-text: #eefbf7;
    --support-muted: #bad5cd;
    --support-accent: #80e0d0;
    --support-on-accent: #102d27;
}

.in3d-bottom-tabs { display: none; }

.in3d-support-dock {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    gap: 8px;
}

.in3d-support button {
    cursor: pointer;
    font: inherit;
}

.in3d-support-dock button,
.in3d-support-dialog button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid var(--support-border);
    border-radius: 999px;
    background: var(--support-bg);
    color: var(--support-text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 5px 18px #092b2526;
}

.in3d-support button.in3d-support-primary {
    border-color: var(--support-accent);
    background: var(--support-accent);
    color: var(--support-on-accent);
}

.in3d-support-dock svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.in3d-support-dock button[data-support-open="in3d-support-qr"] {
    background: #fff6df;
    border-color: #d5a14d;
    color: #75410b;
}

.in3d-support[data-dark] .in3d-support-dock button[data-support-open="in3d-support-qr"] {
    background: #392b1b;
    border-color: #a97634;
    color: #ffdc9d;
}

.in3d-support-dock button[data-support-open="in3d-support-qr"]:is(:hover, :focus-visible) {
    border-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
    .in3d-support-dock button[data-support-open="in3d-support-qr"] svg {
        transform-origin: 50% 65%;
        animation: in3d-coffee-rock 10s ease-in-out infinite;
    }
}

@keyframes in3d-coffee-rock {
    0%, 30%, 100% { transform: none; }
    3%, 11%, 19%, 27% { transform: translateX(-2px) rotate(-23deg); }
    7%, 15%, 23% { transform: translateX(2px) rotate(23deg); }
}

.in3d-support-dialog {
    position: fixed;
    box-sizing: border-box;
    width: min(450px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    padding: clamp(18px, 4vw, 28px);
    border: 1px solid var(--support-border);
    border-radius: 20px;
    background: var(--support-bg);
    color: var(--support-text);
    box-shadow: 0 20px 64px #071c1855;
}

.in3d-support-dialog::backdrop { background: #091c19a8; }
.in3d-support-dialog h2 { margin: 0 32px 8px 0; font-size: 23px; line-height: 1.2; color: inherit; }
.in3d-support-dialog p { margin: 0 0 16px; color: var(--support-muted); font-size: 14px; }

.in3d-support button.in3d-support-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--support-field);
    color: var(--support-text);
    font-size: 23px;
}

.in3d-support-dialog form { display: grid; gap: 12px; }
.in3d-support-dialog label { display: block; font-weight: 700; font-size: 14px; }
.in3d-support-dialog label span { color: var(--support-muted); font-weight: 400; }
.in3d-support-dialog :is(input, select, textarea) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 4px;
    padding: 9px 11px;
    border: 1px solid var(--support-border);
    border-radius: 9px;
    background: var(--support-field);
    color: var(--support-text);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
}

.in3d-support-dialog textarea { resize: vertical; }
.in3d-support-dialog :focus-visible, .in3d-support-dock :focus-visible { outline: 2px solid var(--support-accent); outline-offset: 2px; }
.in3d-support-dialog .in3d-support-status { margin: 0; }
.in3d-support-status:empty { display: none; }
.in3d-support-dialog button:disabled { opacity: .65; cursor: wait; }
.in3d-support-trap { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.in3d-support-qr { width: min(340px, calc(100% - 24px)); text-align: center; }
.in3d-support-qr img { display: block; width: min(100%, 240px); height: auto; margin: 0 auto 14px; border-radius: 12px; }
.in3d-support-qr p:last-child { margin-bottom: 0; }

@media screen and (max-width: 720px) {
    body:has(.in3d-support[data-tabs-ready]) {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    .in3d-support[data-tabs-ready]:not([data-calculator-modal]) .in3d-bottom-tabs {
        position: fixed;
        z-index: 20;
        inset: auto 0 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        border-top: 1px solid var(--support-border);
        background: var(--support-bg);
        box-shadow: 0 -4px 20px #092b251a;
    }

    .in3d-bottom-tabs button {
        position: relative;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 4px;
        min-height: 58px;
        padding: 5px 0 4px;
        border: 0;
        background: transparent;
        color: var(--support-muted);
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .in3d-bottom-tabs svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .in3d-bottom-tabs button[aria-current] {
        color: var(--support-accent);
        background: var(--support-field);
    }

    .in3d-bottom-tabs button[aria-current]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 22px;
        height: 2px;
        transform: translateX(-50%);
        border-radius: 0 0 2px 2px;
        background: currentColor;
    }

    .in3d-support-dock {
        right: calc(8px + env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        flex-direction: column;
        gap: 5px;
    }

    .in3d-support[data-tabs-ready] .in3d-support-dock {
        bottom: calc(68px + env(safe-area-inset-bottom));
    }
    .in3d-support[data-calculator-modal] .in3d-support-dock { display: none; }

    .in3d-support-dock button {
        position: relative;
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        border-radius: 50%;
    }

    .in3d-support-dock .in3d-support-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .in3d-support-dock svg {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
    }
}

@media print {
    .in3d-support { display: none; }
}