/* Mobile UX baseline: modern app-like spacing, safe areas, and overflow control. */
:root {
    --kms-mobile-bg: #f6f9fb;
    --kms-ink: #0f172a;
    --kms-teal: #0f9f92;
    --kms-blue: #0a355c;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 80px;
}
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
html {
    width: 100%;
}
body {
    width: 100%;
}

img, video, canvas, svg {
    max-width: 100%;
}
input, select, textarea, button {
    font: inherit;
}
.kms-mobile-scrollbar {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kms-mobile-scrollbar::-webkit-scrollbar {
    display: none;
}
@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }
    body {
        background: var(--kms-mobile-bg) !important;
        position: relative;
    }
    #swup {
        min-width: 0;
        overflow-x: clip;
    }
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    main#swup > section,
    main#swup > div:not([x-data="globalChat"]) {
        max-width: 100vw;
    }
    input, select, textarea {
        font-size: 16px !important;
    }
    table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        table-layout: auto;
    }
    .overflow-x-auto,
    [class*="overflow-x-auto"] {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .fixed.inset-0,
    [class*="fixed"][class*="inset-0"] {
        max-width: 100vw;
    }
    .ai-chat-bubble-container {
        transform: scale(0.78) translate3d(0,0,0);
        transform-origin: bottom right;
    }
    #swup,
    .swup-transition-fade,
    main,
    section,
    article,
    header,
    footer {
        min-width: 0;
        max-width: 100%;
    }
    main#swup .flex,
    main#swup .grid,
    main#swup [class*="flex"],
    main#swup [class*="grid"] {
        min-width: 0;
    }
    main#swup h1,
    main#swup h2,
    main#swup h3,
    main#swup h4,
    main#swup p,
    main#swup a,
    main#swup span,
    main#swup dd,
    main#swup td,
    main#swup th,
    main#swup pre,
    main#swup code {
        overflow-wrap: anywhere;
    }
    main#swup h1.whitespace-nowrap,
    main#swup h2.whitespace-nowrap,
    main#swup h3.whitespace-nowrap,
    main#swup p.whitespace-nowrap {
        white-space: normal !important;
    }
    .w-screen {
        width: 100% !important;
        max-width: 100% !important;
    }
    [class*="w-[320px]"],
    [class*="w-[340px]"],
    [class*="w-[400px]"],
    [class*="w-[440px]"],
    [class*="w-[450px]"],
    [class*="w-[480px]"],
    [class*="w-[500px]"],
    [class*="w-[600px]"],
    [class*="w-[800px]"],
    [class*="min-w-[320px]"],
    [class*="min-w-[380px]"],
    [class*="min-w-[450px]"],
    [class*="min-w-[600px]"],
    [class*="min-w-[800px]"],
    [class*="min-w-[900px]"],
    [class*="min-w-[980px]"],
    [class*="min-w-[1120px]"],
    [class*="min-w-[1280px]"],
    [class*="min-w-[1320px]"] {
        max-width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
    }
    .fixed,
    [class*="fixed"] {
        max-width: 100vw;
    }
    .swup-transition-fade {
        transition-duration: 0.12s;
    }
}