/*
 * Chtio compact density.
 *
 * Recreates the visual density of the previous UI at 90% browser zoom while
 * the browser remains at 100%. Real component dimensions are changed here;
 * neither zoom nor transform-based page scaling is used.
 */

:root {
    --font-size-xs: .495rem;
    --font-size-sm: .585rem;
    --font-size-md: .684rem;
    --font-size-lg: .81rem;
    --font-size-xl: .91125rem;
    --font-size-2xl: 1.395rem;
    --font-size-3xl: clamp(2.025rem, 4.32vw, 3.87rem);

    --space-1: .2025rem;
    --space-2: .405rem;
    --space-3: .6075rem;
    --space-4: .81rem;
    --space-5: 1.0125rem;
    --space-6: 1.215rem;
    --space-8: 1.62rem;
    --space-10: 2.025rem;
    --space-12: 2.43rem;
    --space-16: 3.24rem;
    --space-20: 4.05rem;

    --radius-sm: .288rem;
    --radius-md: .405rem;
    --radius-lg: .6075rem;
    --radius-xl: .711rem;

    --shadow-sm: 0 .306rem .9rem rgba(34, 34, 48, .07);
    --shadow-md: 0 .612rem 1.62rem rgba(34, 34, 48, .09);
    --shadow-lg: 0 .9rem 2.79rem rgba(34, 34, 48, .08);

    --control-height: 1.935rem;
    --control-height-compact: 1.71rem;
    --touch-target: 2.475rem;
    --sidebar-width: 12.96rem;
    --topbar-height: 3.0375rem;
    --container-width: 66.825rem;
    --content-width: 84.0375rem;
}

/* Shared application chrome. */
.chtio_portal .chtio_topbar {
    padding-inline: 1.215rem;
}

.chtio_portal .chtio_brand {
    gap: 8.1px;
    font-size: 14.58px;
}

.chtio_portal .chtio_brand img {
    width: 27.54px;
    height: 27.54px;
}

.chtio_portal .chtio_top_status,
.chtio_portal .chtio_top_time {
    gap: 5.67px;
    font-size: 8.505px;
}

.chtio_portal .chtio_status_dot {
    width: 5.67px;
    height: 5.67px;
}

.chtio_portal .chtio_top_divider {
    height: 17.82px;
}

.chtio_portal .chtio_icon_button svg,
.chtio_portal .chtio_menu_button svg {
    width: 14.58px;
    height: 14.58px;
}

.chtio_portal .chtio_top_action {
    min-height: 29.16px;
    padding-inline: 10.53px;
    border-radius: 7.29px;
}

.chtio_portal .chtio_sidebar {
    padding: 1.0125rem .81rem 1.62rem;
}

.chtio_portal .chtio_profile_card,
.chtio_portal .chtio_balance_card {
    margin-bottom: 11.34px;
    padding: 11.34px;
}

.chtio_portal .chtio_profile_head {
    grid-template-columns: 34.02px minmax(0, 1fr);
    gap: 8.91px;
    padding-bottom: 9.72px;
    margin-bottom: 8.1px;
}

.chtio_portal .chtio_avatar {
    width: 34.02px;
    height: 34.02px;
    border-radius: 8.91px;
    font-size: 12.96px;
}

.chtio_portal .chtio_nav_label {
    padding-inline: 7.29px;
    margin-bottom: 5.67px;
}

.chtio_portal .chtio_nav_list {
    gap: 2.43px;
}

.chtio_portal .chtio_nav_link {
    gap: 8.91px;
    min-height: 31.59px;
    padding: 6.48px 8.1px;
}

.chtio_portal .chtio_nav_icon {
    flex-basis: 20.25px;
    width: 20.25px;
    height: 20.25px;
    border-radius: 5.67px;
}

.chtio_portal .chtio_nav_icon svg {
    width: 11.34px;
    height: 11.34px;
}

.chtio_portal .chtio_nav_badge {
    min-width: 17.01px;
    height: 15.39px;
    padding-inline: 4.86px;
    font-size: 7.29px;
}

/* Content, reusable cards and controls. */
.chtio_portal h1 {
    font-size: clamp(1.26rem, 2.07vw, 1.8225rem);
}

.chtio_portal h2 {
    font-size: clamp(.963rem, 1.44vw, 1.314rem);
}

.chtio_portal .page-head,
.chtio_portal .ui-page-hero,
.chtio_portal .welcome,
.chtio_portal .support-request-hero {
    gap: 14.58px;
    padding: 16.2px 17.82px;
    margin-bottom: 12.96px;
}

.chtio_portal .page-head::after,
.chtio_portal .ui-page-hero::after,
.chtio_portal .welcome::after {
    top: -72.9px;
    right: -44.55px;
    width: 178.2px;
    height: 178.2px;
    box-shadow: 0 0 0 37.26px rgba(85, 99, 160, .035);
}

.chtio_portal .ui-card-head,
.chtio_portal .section-head,
.chtio_portal .section-title-row,
.chtio_portal .ai-card-head,
.chtio_portal .ai-hub-card-head,
.chtio_portal .chtio_embed_card_head,
.chtio_portal .widget-title-localization-head {
    gap: 11.34px;
    padding-bottom: 10.53px;
    margin-bottom: 11.34px;
}

.chtio_portal .ui-metrics-grid,
.chtio_portal .metric-grid,
.chtio_portal .stats-hero-grid,
.chtio_portal .ui-mini-metrics {
    margin-bottom: 12.96px;
}

.chtio_portal .ui-metric-card,
.chtio_portal .ai-metric-card,
.chtio_portal .ai-hub-metric-card,
.chtio_portal .stats-hero-card,
.chtio_portal .status-card {
    padding: 12.15px;
}

.chtio_portal .ui-metric-card::after,
.chtio_portal .ai-metric-card::after {
    right: -22.68px;
    bottom: -30.78px;
    width: 72.9px;
    height: 72.9px;
}

.chtio_portal .ui-metric-card strong,
.chtio_portal .ai-metric-card strong,
.chtio_portal .stats-hero-card strong {
    margin-top: 4.86px;
    font-size: clamp(16.2px, 1.8vw, 23.49px);
}

.chtio_portal input[type="file"] {
    padding: 7.29px;
}

.chtio_portal .form-group {
    gap: 4.86px;
}

.chtio_portal .inline-form {
    gap: 7.29px;
}

.chtio_portal .alert,
.chtio_portal .page-note,
.chtio_portal .feature-gate,
.chtio_portal .storage-alert {
    gap: 8.1px;
    padding: 9.72px 11.34px;
    margin-bottom: 10.53px;
    border-radius: 8.1px;
}

.chtio_portal .status,
.chtio_portal .status-pill,
.chtio_portal .status-chip,
.chtio_portal .status-approved,
.chtio_portal .ticket-chip {
    gap: 4.05px;
    min-height: 18.63px;
    padding: 2.43px 6.48px;
    border-radius: 4.86px;
}

.chtio_portal th {
    padding: 8.91px 10.53px;
}

.chtio_portal td {
    padding: 9.72px 10.53px;
}

.chtio_portal .chtio-table-toolbar {
    gap: 8.1px;
    padding: 8.1px;
}

.chtio_portal .chtio-table-search-wrap {
    width: min(275.4px, 100%);
}

.chtio_portal .filters,
.chtio_portal .settings-tabs {
    gap: 5.67px;
    padding: 4.05px;
    margin-bottom: 11.34px;
    border-radius: 8.91px;
}

.chtio_portal .filter,
.chtio_portal .settings-tab {
    min-height: 27.54px;
    padding: 5.67px 8.91px;
    border-radius: 5.67px;
    font-size: 8.91px;
}

.chtio_portal .empty-state,
.chtio_portal .ui-empty-state,
.chtio_portal .ui-chart-empty,
.chtio_portal .ai-mini-empty {
    min-height: 105.3px;
    padding: 19.44px;
    border-radius: 8.1px;
}

.chtio_portal .code-box,
.chtio_portal code,
.chtio_portal pre {
    font-size: 9.72px;
}

.chtio_portal .code-box,
.chtio_portal pre {
    padding: 9.72px;
}

.chtio_portal .modal-backdrop,
.chtio_portal .chtio-confirm-backdrop {
    padding: 14.58px;
}

.chtio_portal .plan-modal,
.chtio_portal .modal,
.chtio_portal .chtio-confirm-dialog,
.chtio_portal .admin-user-modal {
    width: min(583.2px, 100%);
    padding: 17.82px;
}

.chtio_portal .chtio-confirm-dialog {
    width: min(380.7px, 100%);
}

.chtio_portal .chtio-confirm-close,
.chtio_portal .plan-modal-close,
.chtio_portal .modal-close {
    top: 9.72px;
    right: 9.72px;
    width: 25.92px;
    height: 25.92px;
}

/* Public website. */
.chtio_portal .chtio_public_logo img {
    width: 144.18px;
    max-height: 37.26px;
}

.chtio_portal .chtio_public_nav {
    gap: 4.05px;
}

.chtio_portal .chtio_public_nav_link {
    padding: 6.48px 8.1px;
    border-radius: 5.67px;
}

.chtio_portal .chtio_language_menu summary {
    gap: 4.05px;
    min-height: 27.54px;
    padding-inline: 7.29px;
}

.chtio_portal .chtio_language_options {
    top: calc(100% + 6.48px);
    min-width: 121.5px;
    padding: 4.86px;
    border-radius: 8.1px;
}

.chtio_portal .public-home-hero {
    gap: clamp(22.68px, 4.5vw, 59.94px);
    min-height: 550.8px;
    padding-block: 61.56px 46.98px;
}

.chtio_portal .public-home-hero-copy h1,
.chtio_portal .public-inner-hero h1 {
    margin: 8.1px 0 14.58px;
    font-size: clamp(34.02px, 4.68vw, 61.56px);
}

.chtio_portal .public-home-hero-copy > p,
.chtio_portal .public-inner-hero-copy > p {
    max-width: 526.5px;
    font-size: clamp(12.96px, 1.35vw, 16.2px);
}

.chtio_portal .public-demo-window,
.chtio_portal .visual-window,
.chtio_portal .visual-sync-board,
.chtio_portal .visual-pricing-board,
.chtio_portal .visual-connect-board,
.chtio_portal .visual-security-board {
    min-height: 332.1px;
    border-radius: 14.58px;
}

.chtio_portal .public-demo-body {
    min-height: 291.6px;
}

.chtio_portal .public-home-section {
    padding-top: 81px;
}

.chtio_portal .public-home-heading,
.chtio_portal .public-page-heading {
    max-width: 615.6px;
    margin-bottom: 22.68px;
}

.chtio_portal .public-home-heading h2,
.chtio_portal .public-page-heading h2 {
    margin-block: 8.1px;
    font-size: clamp(24.3px, 3.6vw, 42.12px);
}

.chtio_portal .public-bento-grid article,
.chtio_portal .public-feature-cards article {
    min-height: 178.2px;
    padding: 17.82px;
}

.chtio_portal .public-bento-grid article > span,
.chtio_portal .public-feature-cards article > span {
    width: 34.02px;
    height: 34.02px;
    border-radius: 8.91px;
}

.chtio_portal .public-inner-hero {
    gap: 40.5px;
    min-height: 477.9px;
    padding-block: 51.84px;
}

.chtio_portal .public-home-cta,
.chtio_portal .public-inner-cta {
    gap: 19.44px;
    padding: 22.68px;
    margin-top: 81px;
    margin-bottom: 64.8px;
    border-radius: 12.96px;
}

/* Authentication pages. */
.chtio_portal .chtio_auth_shell {
    grid-template-columns: minmax(307.8px, .95fr) minmax(356.4px, 1.05fr);
}

.chtio_portal .chtio_auth_showcase {
    padding: 35.64px clamp(27.54px, 4.5vw, 64.8px);
}

.chtio_portal .chtio_auth_brand {
    width: 153.9px;
}

.chtio_portal .chtio_auth_copy {
    width: min(421.2px, 100%);
    margin-bottom: 25.92px;
}

.chtio_portal .chtio_auth_copy h2 {
    max-width: 405px;
    margin-block: 12.96px;
    font-size: clamp(29.16px, 4.5vw, 55.08px);
}

.chtio_portal .chtio_auth_copy p {
    font-size: 12.15px;
}

.chtio_portal .chtio_auth_demo {
    width: min(340.2px, 100%);
}

.chtio_portal .chtio_auth_panel {
    padding: 21.06px clamp(16.2px, 4.5vw, 61.56px);
}

.chtio_portal .auth-card-head h1 {
    font-size: clamp(22.68px, 3.6vw, 34.02px);
}

/* The AI wizard owns its layout but consumes the same compact system. */
.chtio_portal .chtio_ai_profile_wizard .wizard-section-head h2 {
    font-size: clamp(1.08rem, 1.8vw, 1.395rem);
}

.chtio_portal .chtio_ai_profile_wizard .ai-provider-card {
    min-height: 8.46rem;
    padding: .81rem 2.43rem .81rem .81rem;
}

/* Compact desktop thresholds mirror the previous 90% browser viewport. */
@media (max-width: 810px) {
    :root {
        --touch-target: 2.5rem;
    }

    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin) .chtio_topbar {
        min-height: calc(48.6px + env(safe-area-inset-top, 0px));
    }

    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin) .chtio_menu_button,
    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin) .chtio_icon_button,
    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin) .chtio_top_action {
        min-width: 34.02px;
        min-height: 34.02px;
    }

    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin) .chtio_sidebar {
        width: min(259.2px, calc(100vw - 19.44px));
    }

    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin) .chtio_mobile_link,
    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin) .chtio_mobile_nav > a {
        min-height: 42.12px;
    }
}

@media (max-width: 648px) {
    .chtio_portal:is(.chtio_portal_dashboard, .chtio_portal_admin)
    :where(.button, button.button, .input, select, textarea) {
        min-height: 36px;
    }

    .chtio_portal .page-head,
    .chtio_portal .ui-page-hero,
    .chtio_portal .welcome,
    .chtio_portal .support-request-hero {
        padding: 13.12px;
    }
}

@media (max-width: 504px) {
    .chtio_portal .public-home-hero-copy h1,
    .chtio_portal .public-inner-hero h1 {
        font-size: clamp(32.4px, 10.8vw, 46.98px);
    }

    .chtio_portal .plan-modal,
    .chtio_portal .modal,
    .chtio_portal .chtio-confirm-dialog,
    .chtio_portal .admin-user-modal {
        padding: 14.58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chtio_portal *,
    .chtio_portal *::before,
    .chtio_portal *::after {
        scroll-behavior: auto;
    }
}