/* Native App Feel & Responsiveness Fixes */

:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Base resets for native feel */
html {
    height: -webkit-fill-available;
    /* Prevent pull-to-refresh chrome hijacking the overscroll */
    overscroll-behavior-y: none;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: #ffffff;
    /* Prevent rubber-band scroll on body in standalone mode */
    overscroll-behavior: none;
    /* Crisp font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* For App-like pages (Chat, KB, Admin) that shouldn't bounce/scroll at the root */
html.fixed-layout {
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: #ffffff;
}

html.fixed-layout body {
    height: 100%;
    height: 100dvh;
    width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*
     * No bottom padding here — the body must extend through the home-indicator
     * safe area so bottom-anchored content (input bars, footers) can fill it.
     * Each bottom-anchored element handles safe-area-inset-bottom in its own
     * padding so content stays above the home indicator while its background
     * extends through.
     */
    padding-bottom: 0 !important;
    background-color: #ffffff;
}

/* Allow scrolling only in specific containers */
#chat-container, 
#transcript-container,
.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    min-height: 0; /* Important for flex children to scroll */
}

/* Fix for iOS zooming on input focus. */
@media (max-width: 767px) {
    input, textarea, select {
        font-size: 16px !important; 
    }
}

/* Native App Feedback */
button,
[role="button"],
.clickable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* Eliminates 300ms double-tap delay without disabling pinch-zoom */
    touch-action: manipulation;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s ease;
    outline: none !important;
}

button:active,
[role="button"]:active {
    transform: scale(0.97);
    opacity: 0.7;
}

/* Remove grey highlight on touch */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on interactive elements (native app behaviour) */
button,
[role="button"],
nav,
.nav-link,
label {
    -webkit-user-select: none;
    user-select: none;
}

/* Smooth momentum scrolling in scrollable containers */
[class*="overflow-y"],
[class*="overflow-auto"],
[class*="overflow-scroll"] {
    -webkit-overflow-scrolling: touch;
}

/* Handle Safe Areas for modern phones */
header {
    padding-top: calc(var(--safe-area-top) + 12px) !important;
}

.sticky-header {
    padding-top: calc(var(--safe-area-top) + 32px) !important;
}

/*
   We ensure the background of the bottom containers
   covers the safe area at the bottom of the screen.
*/
footer,
.sticky-footer,
.input-area {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    position: relative;
    z-index: 10;
    background-color: #ffffff;
}


/* Sidebar safe area handling */
#sidebar {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left); /* Handle side notch */
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 50;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
    background-color: #fafafa; /* charcoal-50 */
}

/* Ensure the inner sidebar content fills perfectly */
#sidebar > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding-top: 0.5rem;
}

/* Ensure the main container also fills the screen on App-like pages */
html.fixed-layout main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
    /* Horizontal safe areas for landscape mode */
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/*
   Pages with a bottom-anchored element (.input-area / .sticky-footer / footer)
   let that element handle the home-indicator zone — its padding-bottom fills
   the safe area and its background extends through. For pages without such an
   element (kb, admin, profile), main must add the safe-area padding itself
   so trailing UI (save buttons, lists) stays above the home indicator.
*/
html.fixed-layout main:not(:has(.input-area, .sticky-footer, footer)) {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
   Fixed-layout pages without a <main> (login) — the body itself is the
   layout root, so it must absorb the bottom safe area.
*/
html.fixed-layout body:not(:has(main)) {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Utility class for elements that need full safe area protection */
.safe-area-inset {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* Desktop adjustment for main since it's now fixed */
@media (min-width: 768px) {
    main {
        left: 16rem !important; /* matches w-64 */
        padding-left: 0 !important; /* Reset since sidebar is on the left */
        padding-right: 0 !important;
    }
}

/* Better touch targets for mobile */
@media (max-width: 767px) {
    button, 
    .nav-link,
    input[type="submit"] {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure inputs don't feel too cramped with 16px font */
    input, textarea {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* App Loader (auth check / initial load) */
#app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    transition: opacity 0.2s ease;
}

#app-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

#app-loader .app-loader-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid #e4e4e7;
    border-top-color: #18181b;
    border-radius: 50%;
    animation: app-loader-spin 0.7s linear infinite;
}

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

/* Skeleton Loading States */
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f4f4f5 25%, #eaeaea 50%, #f4f4f5 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.6s infinite ease-in-out;
    border-radius: 8px;
    display: block;
}

.skeleton-text { height: 12px; margin-bottom: 8px; width: 100%; }
.skeleton-text-sm { height: 10px; margin-bottom: 6px; width: 60%; }
.skeleton-avatar { height: 40px; width: 40px; border-radius: 10px; }
.skeleton-button { height: 36px; width: 120px; border-radius: 8px; }
.skeleton-chip { height: 24px; width: 80px; border-radius: 9999px; }

/* Hide scrollbars on mobile for cleaner look */
@media (max-width: 767px) {
    .hide-scrollbar-mobile::-webkit-scrollbar,
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .hide-scrollbar-mobile,
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}