body.has-tandlakarchat {
    --content-width: min(1200px, 100vw - 4rem);
}

.tandlakarchat {
    position: relative;
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 480px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    background-color: #fafafa;
}

.tandlakarchat--fixed {
    height: var(--tlc-height, 800px);
    min-height: 0;
}

.tandlakarchat__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tandlakarchat__loader {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    animation: tandlakarchat-loader-timeout 0.4s ease 8s forwards;
}

.tandlakarchat.is-loaded .tandlakarchat__loader {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.tandlakarchat__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #d8d8d8;
    border-top-color: #888;
    border-radius: 50%;
    animation: tandlakarchat-spin 0.8s linear infinite;
}

@keyframes tandlakarchat-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tandlakarchat-loader-timeout {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 812px) {
    /* Vid small-screen får .page-content > * sidled-padding, så -4rem behövs inte. */
    body.has-tandlakarchat {
        --content-width: min(1200px, 100vw);
    }

    /* .tandlakarchat är en ramad box – padding innanför ramen ger ingen luft
       mot skärmkanten, så flytta small-screen-insteget till en yttre margin. */
    .tandlakarchat {
        width: auto;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding-left: 0;
        padding-right: 0;
    }

    .tandlakarchat--fixed {
        height: min(var(--tlc-height, 800px), 80vh);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tandlakarchat__spinner {
        animation-duration: 2s;
    }

    .tandlakarchat.is-loaded .tandlakarchat__loader {
        transition: none;
    }
}