/**
 * Contact Hub – frontend styles.
 *
 * Design goals (2026): clean, minimal, rounded, subtle shadows,
 * restrained transitions, logical properties for RTL, safe-area aware,
 * reduced-motion friendly. No external fonts or dependencies.
 *
 * Scope: everything is namespaced under .chub-* classes so themes and
 * plugins cannot easily collide. Colors adapt via CSS custom properties
 * printed inline from the plugin settings.
 */

/* ------------------------------------------------------------------ */
/* Root wrapper (floating stack)                                       */
/* ------------------------------------------------------------------ */

.chub-root {
        position: fixed;
        z-index: var(--chub-z, 9999);
        right: var(--chub-side, 20px);
        bottom: calc(var(--chub-bottom, 20px) + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        pointer-events: none; /* empty wrapper must never block clicks */
        font-family: inherit;
}

.chub-root[data-side="left"] {
        right: auto;
        left: var(--chub-side, 20px);
        align-items: flex-start;
}

.chub-root,
.chub-root *,
.chub-root *::before,
.chub-root *::after {
        box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Floating button (FAB)                                               */
/* ------------------------------------------------------------------ */

.chub-fab {
        pointer-events: auto;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: var(--chub-size, 56px);
        height: var(--chub-size, 56px);
        padding: 0;
        border: 0;
        border-radius: var(--chub-radius, 999px);
        background: var(--chub-bg, #111827);
        color: var(--chub-fg, #fff);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        font: inherit;
        line-height: 1;
        text-decoration: none;
        box-shadow: var(--chub-shadow, 0 10px 30px rgba(2, 8, 23, 0.18));
        transition:
                transform 0.18s ease,
                background-color 0.18s ease,
                box-shadow 0.18s ease;
}

.chub-fab__icon {
        display: inline-flex;
        font-size: var(--chub-icon, 24px);
}

.chub-fab__icon svg,
.chub-close svg,
.chub-item__icon svg,
.chub-item__meta svg {
        display: block;
        width: 1em;
        height: 1em;
}

.chub-fab--labeled {
        width: auto;
        min-width: var(--chub-size, 56px);
        padding-inline: 20px;
}

.chub-fab__label {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.01em;
        white-space: nowrap;
}

@media (hover: hover) {
        .chub-fab:hover {
                background: var(--chub-bg-hover, color-mix(in srgb, var(--chub-bg, #111827) 86%, #000));
                transform: translateY(-2px);
        }

        .chub-has-shadow .chub-fab:hover {
                box-shadow: 0 14px 34px rgba(2, 8, 23, 0.26);
        }
}

.chub-fab:active {
        transform: translateY(0) scale(0.96);
}

/* One-shot entrance animation (no continuous motion). */
.chub-root[data-anim="on"] .chub-fab {
        animation: chub-fab-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

@keyframes chub-fab-in {
        from {
                opacity: 0;
                transform: translateY(10px) scale(0.85);
        }
        to {
                opacity: 1;
                transform: none;
        }
}

/* Optional CSS tooltip (pure CSS, hover/focus only). */
.chub-fab[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        top: 50%;
        right: calc(100% + 12px);
        transform: translateY(-50%);
        background: #18181b;
        color: #fff;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1;
        padding: 8px 11px;
        border-radius: 8px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}

.chub-fab[data-tip]:hover::after,
.chub-fab[data-tip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
}

.chub-root[data-side="left"] .chub-fab[data-tip]::after {
        right: auto;
        left: calc(100% + 12px);
}

/* ------------------------------------------------------------------ */
/* Backdrop (mobile bottom sheet only)                                 */
/* ------------------------------------------------------------------ */

.chub-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1; /* covers the FAB while the mobile sheet is open */
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.chub-root.is-open .chub-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
}

/* ------------------------------------------------------------------ */
/* Contact panel – desktop: compact popup card                         */
/* ------------------------------------------------------------------ */

.chub-panel {
        z-index: 2; /* above backdrop + FAB (mobile sheet stacking) */
        pointer-events: auto;
        position: absolute;
        bottom: calc(100% + 14px);
        right: 0;
        width: min(340px, calc(100vw - 2 * var(--chub-side, 20px)));
        max-height: min(68vh, 520px);
        overflow: auto;
        overscroll-behavior: contain;
        background: #fff;
        color: #18181b;
        border: 1px solid rgba(2, 8, 23, 0.08);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(2, 8, 23, 0.22);
        font-size: 15px;
        line-height: 1.45;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) scale(0.97);
        transform-origin: bottom right;
        transition:
                opacity 0.2s ease,
                transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15),
                visibility 0s linear 0.2s;
}

.chub-root.is-open .chub-panel {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
}

.chub-root[data-side="left"] .chub-panel {
        right: auto;
        left: 0;
        transform-origin: bottom left;
}

.chub-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px 10px;
}

.chub-panel__title {
        font-weight: 600;
        font-size: 15px;
        color: #111827;
}

.chub-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #52525b;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        font-size: 18px;
        line-height: 1;
        transition: background-color 0.15s ease, color 0.15s ease;
}

.chub-close:hover {
        background: #f4f4f5;
        color: #18181b;
}

/* ------------------------------------------------------------------ */
/* Contact items – the whole row is a link                             */
/* ------------------------------------------------------------------ */

.chub-panel__list {
        list-style: none;
        margin: 0;
        padding: 4px 8px 10px;
}

.chub-item-wrap {
        margin: 0;
}

.chub-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 14px;
        color: inherit;
        text-decoration: none;
        transition: background-color 0.15s ease;
}

@media (hover: hover) {
        .chub-item:hover {
                background: #f4f4f5;
        }
}

.chub-item:active {
        background: #ececef;
}

.chub-item__icon {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 20px;
        background: #f4f4f5;
        color: var(--chub-item-color, #111827);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
        .chub-item__icon {
                background: color-mix(in srgb, var(--chub-item-color, #111827) 13%, transparent);
        }
}

.chub-item__text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
}

.chub-item__label {
        font-weight: 600;
        font-size: 14.5px;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.chub-item__sub {
        font-size: 13px;
        color: #71717a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.chub-item__meta {
        flex: none;
        margin-inline-start: auto;
        display: inline-flex;
        font-size: 15px;
        color: #a1a1aa;
        transition: transform 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
        .chub-item:hover .chub-item__meta {
                color: #52525b;
                transform: translate(1px, -1px);
        }
}

[dir="rtl"] .chub-item__meta svg {
        transform: scaleX(-1);
}

/* Grab handle – rendered on the mobile sheet only. */
.chub-sheet-handle {
        display: none;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #e4e4e7;
        margin: 8px auto 0;
}

/* ------------------------------------------------------------------ */
/* Mobile (≤640px): ergonomic bottom sheet                             */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
        .chub-root {
                left: 0;
                right: 0;
                bottom: 0;
                align-items: flex-end;
                padding-inline: var(--chub-side, 20px);
        }

        .chub-root[data-side="left"] {
                align-items: flex-start;
        }

        .chub-fab {
                margin-bottom: calc(var(--chub-bottom, 20px) + env(safe-area-inset-bottom, 0px));
        }

        .chub-backdrop {
                display: block;
        }

        .chub-panel {
                left: 0;
                right: 0;
                bottom: 0;
                width: auto;
                max-height: min(72vh, 520px);
                border: 0;
                border-radius: 20px 20px 0 0;
                padding-bottom: env(safe-area-inset-bottom, 0px);
                transform: translateY(105%);
                transform-origin: bottom center;
        }

        @supports (height: 1dvh) {
                .chub-panel {
                        max-height: min(72dvh, 520px);
                }
        }

        .chub-root.is-open .chub-panel {
                transform: none;
        }

        .chub-sheet-handle {
                display: block;
        }

        .chub-panel__head {
                padding-top: 10px;
        }
}

/* ------------------------------------------------------------------ */
/* Focus + a11y + print                                                */
/* ------------------------------------------------------------------ */

.chub-fab:focus-visible,
.chub-close:focus-visible,
.chub-item:focus-visible {
        outline: 2px solid var(--chub-bg, #111827);
        outline-offset: 2px;
}

.chub-item:focus-visible {
        outline-offset: -2px;
}

@media print {
        .chub-root {
                display: none !important;
        }
}

@media (prefers-reduced-motion: reduce) {
        .chub-root,
        .chub-root * {
                transition-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
        }

        .chub-root[data-anim="on"] .chub-fab {
                animation: none;
        }
}

/* ------------------------------------------------------------------ */
/* v1.1.0 – panel presentation variables + forced modes                */
/* Defaults reproduce the stylesheet values above exactly.             */
/* ------------------------------------------------------------------ */

/* Desktop popup: user-configurable radius + shadow. Higher specificity */
/* than the base rules, but the mobile sheet rule below still wins on   */
/* phones so bottom sheets keep their fixed ergonomic shape.            */
.chub-root .chub-panel {
        border-radius: var(--chub-panel-radius, 18px);
        box-shadow: var(--chub-panel-shadow, 0 24px 60px rgba(2, 8, 23, 0.22));
}

/* Mobile sheet keeps its fixed shape unless the popup is forced. */
@media (max-width: 640px) {
        .chub-root .chub-panel {
                border-radius: 20px 20px 0 0;
        }
}

/* Forced bottom sheet on desktop-width viewports. */
@media (min-width: 641px) {
        .chub-root[data-desktop-presentation="sheet"] {
                left: 0;
                right: 0;
                bottom: 0;
                align-items: flex-end;
        }

        .chub-root[data-desktop-presentation="sheet"] .chub-fab {
                margin-bottom: calc(var(--chub-bottom, 20px) + env(safe-area-inset-bottom, 0px));
        }

        .chub-root[data-desktop-presentation="sheet"] .chub-backdrop {
                display: block;
        }

        .chub-root[data-desktop-presentation="sheet"] .chub-panel {
                left: 0;
                right: 0;
                bottom: 0;
                width: auto;
                max-height: min(72vh, 520px);
                border: 0;
                border-radius: 20px 20px 0 0;
                padding-bottom: env(safe-area-inset-bottom, 0px);
                transform: translateY(105%);
                transform-origin: bottom center;
        }

        .chub-root[data-desktop-presentation="sheet"].is-open .chub-panel {
                transform: none;
        }

        .chub-root[data-desktop-presentation="sheet"] .chub-sheet-handle {
                display: block;
        }
}

/* Forced popup on mobile-width viewports. */
@media (max-width: 640px) {
        .chub-root[data-mobile-presentation="popup"] {
                align-items: flex-end;
        }

        .chub-root[data-mobile-presentation="popup"] .chub-fab {
                margin-bottom: calc(var(--chub-bottom, 20px) + env(safe-area-inset-bottom, 0px));
        }

        .chub-root[data-mobile-presentation="popup"] .chub-backdrop {
                display: none;
        }

        .chub-root[data-mobile-presentation="popup"] .chub-panel {
                left: auto;
                right: var(--chub-side, 20px);
                bottom: calc(var(--chub-bottom, 20px) + var(--chub-size, 56px) + 16px);
                width: min(340px, calc(100vw - 2 * var(--chub-side, 20px)));
                max-height: min(60vh, 480px);
                border: 1px solid rgba(2, 8, 23, 0.08);
                border-radius: var(--chub-panel-radius, 18px);
                padding-bottom: 0;
                transform: translateY(8px) scale(0.97);
                transform-origin: bottom right;
        }

        .chub-root[data-mobile-presentation="popup"][data-side="left"] .chub-panel {
                right: auto;
                left: var(--chub-side, 20px);
                transform-origin: bottom left;
        }

        .chub-root[data-mobile-presentation="popup"].is-open .chub-panel {
                transform: none;
        }

        .chub-root[data-mobile-presentation="popup"] .chub-sheet-handle {
                display: none;
        }
}