/* Final responsive layer for the public front. Keep this file loaded last. */
:root {
    --ct-front-page-max: 1220px;
    --ct-front-page-gutter: clamp(12px, 2.4vw, 28px);
    --ct-front-topbar-height: 76px;
    --ct-front-sidebar-width: 270px;
    --ct-front-sidebar-collapsed-width: 78px;
}

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

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
}

.content,
.public-main,
.page-wrapper,
main {
    min-width: 0;
}

.content {
    padding: var(--ct-front-page-gutter) !important;
    padding-top: calc(var(--ct-front-page-gutter) + 8px) !important;
}

body:not(.front-sidebar-collapsed) .content {
    width: min(var(--ct-front-page-max), calc(100vw - var(--ct-front-sidebar-width) - (var(--ct-front-page-gutter) * 2))) !important;
    margin-left: calc(var(--ct-front-sidebar-width) + ((100vw - var(--ct-front-sidebar-width) - min(var(--ct-front-page-max), calc(100vw - var(--ct-front-sidebar-width) - (var(--ct-front-page-gutter) * 2)))) / 2)) !important;
    margin-right: auto !important;
}

body.front-sidebar-collapsed .content {
    width: min(var(--ct-front-page-max), calc(100vw - var(--ct-front-sidebar-collapsed-width) - (var(--ct-front-page-gutter) * 2))) !important;
    margin-left: calc(var(--ct-front-sidebar-collapsed-width) + ((100vw - var(--ct-front-sidebar-collapsed-width) - min(var(--ct-front-page-max), calc(100vw - var(--ct-front-sidebar-collapsed-width) - (var(--ct-front-page-gutter) * 2)))) / 2)) !important;
    margin-right: auto !important;
}

.content > *,
.ct-front-footer,
.front-chat-shell,
.client-page-center,
.market-hero,
.company-grid,
.plans-page,
.empty-state {
    max-width: 100%;
}

.ct-front-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9000 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.ct-front-brand-row,
.ct-front-brand,
.ct-front-brand-copy,
.ct-front-actions,
.ct-front-account,
.ct-company-search {
    min-width: 0 !important;
}

.ct-front-brand-copy strong,
.ct-front-brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-front-nav-link,
.menu-item,
.btn,
button,
input,
textarea,
select {
    max-width: 100%;
}

.ct-company-search-results {
    width: min(520px, calc(100vw - 24px)) !important;
    max-height: min(460px, calc(100dvh - 150px)) !important;
    overflow: auto !important;
}

.company-grid,
.ct-product-grid,
.ct-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.company-card,
.plan-card,
.glass,
.card,
.chat-panel,
.avatar-panel {
    min-width: 0;
}

.company-actions,
.plans-hero-actions,
.chat-toolbar,
.chat-toolbar-actions,
.front-history-card-top {
    flex-wrap: wrap;
}

.message,
.msg,
.chat-panel .message {
    max-width: min(86%, 760px) !important;
    overflow-wrap: anywhere;
}

.product-list-message,
.chat-panel .message.product-list-message {
    max-width: 100% !important;
}

.front-chat-shell {
    width: 100% !important;
}

.front-chat-shell .chat-layout {
    grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr) !important;
    gap: clamp(12px, 2vw, 20px) !important;
    min-width: 0;
}

.front-chat-shell.no-avatar .chat-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}

.front-chat-shell .chat-panel {
    height: auto !important;
    min-height: min(760px, calc(100dvh - 180px)) !important;
    max-height: none !important;
}

.front-chat-shell .messages {
    min-height: 280px;
}

.front-chat-shell .avatar-panel {
    min-height: 0 !important;
}

.front-chat-shell .avatar-frame,
.front-chat-shell .unity-avatar-container {
    height: auto !important;
    min-height: clamp(260px, 48dvh, 620px) !important;
    max-height: calc(100dvh - 180px) !important;
}

.input-group {
    min-width: 0;
}

.input-group > .form-control {
    min-width: 0;
}

.table,
.services-table {
    overflow-wrap: anywhere;
}

.table-responsive,
.front-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1199px) {
    :root {
        --ct-front-sidebar-width: 236px;
        --ct-front-sidebar-collapsed-width: 68px;
    }

    #frontSidebar.sidebar.front-sidebar {
        width: var(--ct-front-sidebar-width) !important;
        min-width: var(--ct-front-sidebar-width) !important;
    }

    body:not(.front-sidebar-collapsed) .content {
        width: calc(100vw - var(--ct-front-sidebar-width) - var(--ct-front-page-gutter)) !important;
        margin-left: var(--ct-front-sidebar-width) !important;
        margin-right: 0 !important;
    }

    body.front-sidebar-collapsed .content {
        width: calc(100vw - var(--ct-front-sidebar-collapsed-width) - var(--ct-front-page-gutter)) !important;
        margin-left: var(--ct-front-sidebar-collapsed-width) !important;
        margin-right: 0 !important;
    }

    .front-chat-shell .chat-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .front-chat-shell .avatar-frame,
    .front-chat-shell .unity-avatar-container {
        aspect-ratio: 16 / 9 !important;
        min-height: clamp(220px, 34dvh, 380px) !important;
        max-height: 420px !important;
    }
}

@media (max-width: 992px) {
    .ct-front-topbar {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "actions"
            "nav" !important;
        gap: 10px !important;
        padding: 10px var(--ct-front-page-gutter) !important;
    }

    .ct-front-brand-row {
        width: 100% !important;
    }

    .ct-front-actions {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .ct-company-search {
        max-width: none !important;
        width: 100% !important;
    }

    .ct-front-account {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .ct-front-account > * {
        max-width: 100%;
    }

    .ct-front-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    :root {
        --ct-front-page-gutter: 12px;
        --ct-front-sidebar-width: 0px;
        --ct-front-sidebar-collapsed-width: 0px;
    }

    #frontSidebar.sidebar.front-sidebar {
        display: none !important;
    }

    body:not(.front-sidebar-collapsed) .content,
    body.front-sidebar-collapsed .content,
    .content {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--ct-front-page-gutter) !important;
        padding-right: var(--ct-front-page-gutter) !important;
    }

    .ct-front-footer-inner,
    .front-brazilian-tech-footer {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }

    .market-hero {
        padding: 8px 0 24px !important;
    }

    .market-title {
        font-size: clamp(2rem, 10vw, 3.1rem) !important;
        letter-spacing: 0 !important;
    }

    .company-grid,
    .plans-grid {
        grid-template-columns: 1fr !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .company-card,
    .plan-card,
    .plans-services,
    .plans-hero-copy,
    .plans-signal-panel,
    .payment-return-card {
        border-radius: 8px !important;
    }

    .front-chat-shell .chat-panel {
        min-height: calc(100dvh - 190px) !important;
    }

    .front-chat-shell .messages {
        min-height: 320px;
        padding: 14px !important;
    }

    .front-history-drawer-card {
        width: min(100vw - 24px, 520px) !important;
        max-height: calc(100dvh - 24px) !important;
    }
}

@media (max-width: 560px) {
    .ct-front-topbar {
        padding: 8px !important;
    }

    .ct-front-nav {
        grid-template-columns: 1fr !important;
    }

    .ct-front-nav-link {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ct-front-brand-copy small {
        display: none !important;
    }

    .company-header,
    .plan-card-top {
        align-items: flex-start;
    }

    .company-actions,
    .plans-hero-actions {
        flex-direction: column;
    }

    .btn-company,
    .plans-primary-link,
    .plans-secondary-link,
    .plan-cta,
    .checkout-submit {
        width: 100%;
    }

    .message,
    .msg,
    .chat-panel .message {
        max-width: 94% !important;
    }

    .front-chat-shell .input-group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .front-chat-shell .input-group > .form-control,
    .front-chat-shell .input-group > .btn {
        border-radius: 14px !important;
        width: 100%;
    }

    .attendance-rating-title {
        align-items: flex-start;
    }

    .checkout-dialog {
        width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow: auto !important;
    }
}

@media (max-width: 390px) {
    .content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ct-front-brand-mark {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .ct-front-brand-copy strong {
        font-size: 15px !important;
    }

    .front-chat-shell .input-group {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   v101 - Responsivo final do front
   Mantem o topo estavel no desktop e deixa mobile/tablet fluir sem sobreposicao.
========================================================= */
@media (min-width: 993px) {
    .ct-front-topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 12000 !important;
        min-height: var(--ct-front-topbar-height) !important;
        width: 100% !important;
        max-width: 100vw !important;
        transform: translateZ(0);
        will-change: transform;
        isolation: isolate;
    }

    #frontSidebar.sidebar.front-sidebar {
        top: var(--ct-front-topbar-height) !important;
        height: calc(100dvh - var(--ct-front-topbar-height)) !important;
        max-height: calc(100dvh - var(--ct-front-topbar-height)) !important;
    }

    .content {
        padding-top: calc(var(--ct-front-topbar-height) + var(--ct-front-page-gutter)) !important;
    }

    .ct-front-topbar .ct-front-nav {
        min-width: 0 !important;
    }

    .ct-front-topbar .ct-front-actions {
        min-width: 0 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) {
    .ct-front-topbar {
        grid-template-columns: minmax(190px, auto) minmax(0, 1fr) minmax(360px, auto) !important;
        gap: 10px !important;
    }

    .ct-front-nav {
        gap: 5px !important;
    }

    .ct-front-nav-link {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 13px !important;
    }

    .ct-front-actions {
        grid-template-columns: minmax(210px, 360px) auto !important;
        gap: 10px !important;
    }
}

@media (max-width: 992px) {
    .ct-front-topbar {
        position: sticky !important;
        inset: auto !important;
        top: 0 !important;
        max-width: 100vw !important;
    }

    .content {
        padding-top: var(--ct-front-page-gutter) !important;
    }

    #frontSidebar.sidebar.front-sidebar {
        top: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

@media (max-width: 768px) {
    .ct-front-topbar {
        border-radius: 0 !important;
    }

    .ct-front-brand-row,
    .ct-front-actions,
    .ct-front-account,
    .ct-auth-guest,
    .ct-auth-user {
        max-width: 100% !important;
    }

    .ct-auth-guest {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ct-auth-login,
    .ct-auth-register,
    .ct-auth-logout {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 420px) {
    .ct-auth-guest {
        grid-template-columns: 1fr !important;
    }
}