/**
 * MOBILE UNIFIED STYLES
 * Consolidated Mobile UI Improvements
 * Replaces: mobile-scaling.css, mobile-enhancements.css, mobile-optimizations.css, ios-enhancements.css, ios-pwa.css
 */

/* ============================================================================
   1. VARIABLES & RESETS
   ============================================================================ */
:root {
    /* Safe Area Variables with Defaults */
    --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);

    /* Mobile Scale Factors */
    --mobile-scale: 1;
    --header-height: 64px;
    --header-height-mobile: 56px;
}

/* Base Reset for Touch Devices */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Allow text selection on inputs and content that should be selectable */
input,
textarea,
.markdown-body,
.selectable-text {
    -webkit-touch-callout: default;
    user-select: text;
    -webkit-user-select: text;
}

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
    width: 100vw;
    overscroll-behavior-y: none;
    /* Prevent pull-to-refresh unless explicitly handled */
    -webkit-overflow-scrolling: touch;
}

/* Fix 100vh on Mobile */
body {
    min-height: 100vh;
    min-height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

/* ============================================================================
   2. TYPOGRAPHY & SCALING (Viewport Specifics)
   ============================================================================ */

/* Base Font Scaling */
html {
    font-size: 16px;
    /* Default */
    -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 375px) {
    html {
        font-size: 14px;
    }
}

@media screen and (min-width: 376px) and (max-width: 428px) {
    html {
        font-size: 15px;
    }
}

/* Input Font Size Fix (Prevents iOS Zoom) */
@media screen and (max-width: 768px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============================================================================
   3. LAYOUT & CONTAINERS
   ============================================================================ */

/* Safe Area Spacing Utilities */
.safe-pt {
    padding-top: var(--safe-area-top) !important;
}

.safe-pb {
    padding-bottom: var(--safe-area-bottom) !important;
}

.safe-pl {
    padding-left: var(--safe-area-left) !important;
}

.safe-pr {
    padding-right: var(--safe-area-right) !important;
}

/* Header Adjustments */
header[role="banner"] {
    padding-top: var(--safe-area-top);
    transition: height 0.2s ease;
}

@media screen and (max-width: 640px) {
    header[role="banner"] {
        height: calc(var(--header-height-mobile) + var(--safe-area-top)) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Compact header elements on small screens */
    header[role="banner"] h1 {
        font-size: 1.1rem !important;
    }
}

/* Main Content Padding for Header - REMOVED (Header is flex child) */
/* Main Content Padding for Header - REMOVED (Header is flex child) */
/* main { padding-top: calc(var(--header-height) + var(--safe-area-top)); } */


@media screen and (max-width: 640px) {
    main {
        padding-top: 0 !important;
    }
}


/* ============================================================================
   4. INTERACTIVE ELEMENTS
   ============================================================================ */

/* Touch Targets - Minimum 44px */
@media (pointer: coarse) {

    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    select,
    [role="button"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Button Active States (Feedback) */
button:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* Input Fields Styles */
input,
textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
    /* Standardize border radius */
}

/* Chat Input Area specific optimizations */
.input-area-container,
[class*="input-area"] {
    padding-bottom: max(12px, var(--safe-area-bottom)) !important;
}

/* ============================================================================
   5. COMPONENT OVERRIDES
   ============================================================================ */

/* --- MODALS --- */
/* Full screen modals on mobile */
@media screen and (max-width: 640px) {

    [role="dialog"],
    .modal-content {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* Ensure content within modal scrolls properly */
    [role="dialog"]>div,
    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(20px + var(--safe-area-bottom)) !important;
    }

    /* Close button positioning */
    [role="dialog"] button[aria-label="Close"] {
        top: max(12px, var(--safe-area-top)) !important;
        right: 12px !important;
    }
}

/* --- TOASTS --- */
/* Mobile toast positioning */
@media screen and (max-width: 640px) {

    .toast-container,
    [class*="ToastContainer"] {
        top: auto !important;
        bottom: max(20px, var(--safe-area-bottom)) !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        width: auto !important;
    }

    .toast,
    [class*="Toast"] {
        width: 100% !important;
        margin-bottom: 8px;
    }
}

/* --- SIDEBAR --- */
/* Mobile Sidebar interaction */
@media screen and (max-width: 768px) {
    aside[class*="Sidebar"] {
        width: 85vw !important;
        max-width: 320px !important;
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
    }
}

/* --- TABLES --- */
/* Responsive Table Wrapper */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile Table Adjustments */
@media screen and (max-width: 640px) {

    /* Force tables to not exceed viewport */
    table {
        width: 100%;
        table-layout: fixed;
    }

    th,
    td {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        overflow-wrap: break-word;
    }
}

/* ============================================================================
   6. PWA & STANDALONE SPECIFICS
   ============================================================================ */
@media all and (display-mode: standalone) {
    body {
        /* Prevent selection in UI elements for app-like feel */
        user-select: none;
        -webkit-user-select: none;
    }

    /* Re-enable for text content */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    article {
        user-select: text;
        -webkit-user-select: text;
    }
}

/* ============================================================================
   7. UTILITIES
   ============================================================================ */
.no-scroll {
    overflow: hidden !important;
}

.gpu-accelerated {
    transform: translateZ(0);
}

/* App specific height fix */
.ios-h-screen {
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
    .ios-h-screen {
        height: -webkit-fill-available;
    }
}

/* ============================================================================
   8. iOS KEYBOARD-AWARE LAYOUT
   Uses --keyboard-height set by useIOSKeyboard hook
   ============================================================================ */

:root {
    --keyboard-height: 0px;
    --viewport-height: 100dvh;
}

/* When keyboard is open, adjust the main layout */
body.keyboard-open {
    /* Prevent body scroll when keyboard is open */
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Chat input area moves above keyboard */
@media screen and (max-width: 768px) {

    body.keyboard-open .input-area-container,
    body.keyboard-open [class*="input-area"] {
        padding-bottom: max(8px, var(--safe-area-bottom)) !important;
        transition: padding-bottom 0.2s ease-out;
    }

    /* Shrink chat container to make room for keyboard */
    body.keyboard-open [data-chat-container] {
        max-height: calc(var(--viewport-height, 100dvh) - 120px) !important;
        transition: max-height 0.25s ease-out;
    }
}

/* ============================================================================
   9. ENHANCED SCROLL & MOMENTUM
   ============================================================================ */

/* Chat message list — buttery smooth momentum scroll */
@media screen and (max-width: 768px) {

    [data-chat-container],
    .chat-messages-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
        /* Prevent iOS rubber-band at top/bottom of chat */
        overscroll-behavior: contain;
    }

    /* Scroll indicator styling */
    [data-chat-container]::-webkit-scrollbar {
        width: 3px;
    }

    [data-chat-container]::-webkit-scrollbar-track {
        background: transparent;
    }

    [data-chat-container]::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.2);
        border-radius: 10px;
    }

    /* Ensure last message has breathing room above input */
    [data-chat-container]> :last-child {
        padding-bottom: 16px;
    }
}

/* ============================================================================
   10. ENHANCED TOUCH INTERACTIONS
   ============================================================================ */

/* Springy button press feedback */
@media (pointer: coarse) {

    button,
    [role="button"],
    a {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Springy press effect */
    button:active,
    [role="button"]:active {
        transform: scale(0.96);
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Prevent accidental double-tap-to-zoom */
    button,
    [role="button"],
    a,
    label {
        touch-action: manipulation;
    }
}

/* Message long-press visual feedback */
@media (pointer: coarse) {
    .message-bubble {
        transition: background-color 0.15s ease, transform 0.15s ease;
    }

    .message-bubble:active {
        transform: scale(0.99);
    }
}

/* ============================================================================
   11. MOBILE MODAL IMPROVEMENTS (Bottom Sheet Style)
   ============================================================================ */

@media screen and (max-width: 640px) {

    /* Bottom-sheet appearance for modals */
    [role="dialog"]>div:first-child,
    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        margin-top: auto !important;
        max-height: 92dvh !important;
        animation: slideUpSheet 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* Visual drag handle */
    [role="dialog"]>div:first-child::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(148, 163, 184, 0.3);
        border-radius: 999px;
        margin: 8px auto 4px;
        flex-shrink: 0;
    }
}

@keyframes slideUpSheet {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fix iOS body scroll lock — the hardest Safari bug */
body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
    /* Preserve scroll position */
    top: var(--scroll-position, 0);
}

/* ============================================================================
   12. PERFORMANCE & RENDERING
   ============================================================================ */

/* GPU-accelerate animated elements */
.animate-in,
.animate-pulse,
[style*="animation"],
.streaming-cursor,
.typing-dot,
.animated-step {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Content visibility for off-screen messages (paint containment) */
@media screen and (max-width: 768px) {
    .message-container {
        content-visibility: auto;
        contain-intrinsic-size: auto 150px;
    }
}

/* Safari-optimized font smoothing */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================================
   13. MOBILE CHAT MESSAGE FORMATTING
   ============================================================================ */

@media screen and (max-width: 640px) {

    /* Tighter prose spacing on mobile */
    .prose {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .prose p {
        margin-top: 0.5em !important;
        margin-bottom: 0.5em !important;
    }

    .prose h1,
    .prose h2,
    .prose h3 {
        margin-top: 1em !important;
        margin-bottom: 0.4em !important;
    }

    .prose h1 {
        font-size: 1.15em !important;
    }

    .prose h2 {
        font-size: 1.05em !important;
    }

    .prose h3 {
        font-size: 1em !important;
    }

    .prose ul,
    .prose ol {
        margin-top: 0.4em !important;
        margin-bottom: 0.4em !important;
        padding-left: 1.25em !important;
    }

    .prose li {
        margin-top: 0.15em !important;
        margin-bottom: 0.15em !important;
    }

    .prose pre {
        font-size: 12px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .prose code {
        font-size: 0.85em !important;
        padding: 1px 4px !important;
    }

    .prose blockquote {
        margin-left: 0 !important;
        padding-left: 12px !important;
        font-size: 13px !important;
    }

    /* Prevent images from overflowing */
    .prose img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px;
    }

    /* Math/KaTeX overflow fix */
    .katex-display {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0;
    }

    .katex {
        font-size: 0.9em !important;
    }
}

/* ============================================================================
   14. BOLD TEXT EMPHASIS (Amber/Yellow in Dark Mode)
   ============================================================================ */

/* Ensure all bold text in AI messages is amber, not white */
.markdown-body strong,
.markdown-body b,
.prose-invert strong,
.prose-invert b {
    color: #fbbf24 !important;
    font-weight: 700;
}

/* Light mode bold stays dark */
@media (prefers-color-scheme: light) {

    .markdown-body strong,
    .markdown-body b {
        color: #92400e !important;
    }
}

/* ============================================================================
   15. CHAT MESSAGE SECTION SPACING
   Bold labels like **Formula:**, **Given Data:** act as visual section headers.
   This gives them breathing room so content doesn't feel cramped.
   ============================================================================ */

/* Paragraphs that start with bold text get extra top spacing */
.markdown-body p>strong:first-child,
.prose p>strong:first-child {
    display: inline-block;
    margin-top: 4px;
}

/* Consecutive paragraphs with spacing */
.markdown-body p+p,
.prose p+p {
    margin-top: 0.6em;
}

/* Bold labels that are the only content in a paragraph act as sub-headers */
.markdown-body p>strong:only-child,
.prose p>strong:only-child {
    display: block;
    margin-top: 0.75em;
    margin-bottom: 0.15em;
    font-size: 0.95em;
    letter-spacing: 0.01em;
}

/* Better ordered list spacing for computation steps */
.markdown-body ol>li,
.prose ol>li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 4px;
}

/* Horizontal rule as clean section divider */
.markdown-body hr,
.prose hr {
    margin-top: 1.25em !important;
    margin-bottom: 1.25em !important;
}

/* ============================================================================
   16. ENHANCED MOBILE UX — SCROLLBAR HIDING & SMOOTH SCROLL
   ============================================================================ */

/* Hide scrollbar for horizontal tool rows (doc viewer mobile toolbar) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth momentum scrolling everywhere on mobile */
@media screen and (max-width: 768px) {
    .overflow-y-auto,
    .overflow-x-auto,
    [style*="overflow"] {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================================
   17. MOBILE CHAT BUBBLE ENHANCEMENTS
   ============================================================================ */

/* Slide-in animations for chat messages - 60fps */
@keyframes slideInRight60fps {
    from { opacity: 0; transform: translate3d(24px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideInLeft60fps {
    from { opacity: 0; transform: translate3d(-24px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Mobile: compact message bubbles with better touch targets */
@media screen and (max-width: 640px) {
    /* Smaller avatars on mobile */
    .message-container .avatar {
        width: 28px !important;
        height: 28px !important;
    }

    /* Ensure action buttons (copy, pin) are touch-friendly */
    .message-container button {
        min-width: 36px;
        min-height: 36px;
    }

    /* Callout blocks tighter on mobile */
    .callout-block {
        margin: 0.5rem 0 !important;
    }

    /* Better table scroll indicator on mobile */
    .prose table {
        position: relative;
    }
    .prose table::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.05));
        pointer-events: none;
    }
}

/* ============================================================================
   18. MOBILE INPUT AREA IMPROVEMENTS
   ============================================================================ */

@media screen and (max-width: 640px) {
    /* Input area: tighter padding, larger touch targets */
    .input-area-container {
        padding: 8px 10px !important;
        padding-bottom: max(8px, var(--safe-area-bottom)) !important;
    }

    /* AI tools popup: full width on mobile, positioned as bottom sheet */
    .input-area-container [class*="absolute bottom-full"] {
        left: -8px !important;
        right: -8px !important;
        width: auto !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0 !important;
    }
}

/* ============================================================================
   19. APK SPECIFIC — CAPACITOR & ANDROID TWEAKS
   ============================================================================ */

/* Android status bar overlap fix */
body.android-apk {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Android back button safe area */
body.android-apk .input-area-container {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Android notch handling */
@media screen and (display-mode: standalone) {
    body.android-apk header[role="banner"] {
        padding-top: max(8px, env(safe-area-inset-top, 0px));
    }
}

/* ============================================================================
   20. MOBILE FLOATING PANEL IMPROVEMENTS
   ============================================================================ */

@media screen and (max-width: 640px) {
    /* Floating panels go full screen on mobile (already handled in component,
       but this ensures proper safe area handling) */
    .floating-panel-mobile {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* Panel content scrolls smoothly */
    .floating-panel-mobile > div {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ============================================================================
   21. ENHANCED DARK MODE MOBILE CONTRAST
   ============================================================================ */

@media screen and (max-width: 640px) {
    /* Ensure sufficient contrast for small text in dark mode on mobile */
    .dark .text-slate-400,
    [class*="dark"] .text-slate-400 {
        color: rgb(148 163 184) !important; /* slate-400 — ensure readable */
    }

    /* Badge text always white and readable */
    [class*="bg-red-500"][class*="rounded-full"],
    [class*="bg-emerald-500"][class*="rounded-full"] {
        color: white !important;
        font-weight: 700 !important;
    }
}