/**
 * Multimodal Sentiment Annotation Web Platform
 * Base Application Stylesheet
 */

[x-cloak] {
    display: none !important;
}

@layer base {
    /* Enforce mobile-first touch target sizing */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent accidental horizontal overflow on narrow viewports (360px+) */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        -webkit-tap-highlight-color: transparent;
    }

    /* High-visibility keyboard focus indicator */
    :focus-visible {
        outline: 2px solid #10b981;
        outline-offset: 2px;
    }
}

/* Smooth transition for theme switching */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Text wrapping helper for long URLs and unbroken strings */
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Subtle custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}