/* ===== RESET & BASE ===== */
html {
    overflow-x: hidden;
    width: 100%;
    scrollbar-gutter: stable;
}

body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ===== DARK THEME - Lebih Terang ===== */
body.docs-page {
    touch-action: manipulation;
    background-color: #121212 !important;
    background-image: none !important;
}

.docs-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://c.termai.cc/i135/xqR.png');
    background-size: cover;
    background-position: center;
    opacity: 0.05 !important;
    z-index: -1;
    pointer-events: none;
    filter: invert(0.1) brightness(0.4);
}

/* ===== FIX HORIZONTAL OVERFLOW - KETAT ===== */
.docs-page .compact-width {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.docs-page .text-wrap-force {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: pre-wrap !important;
    max-width: 100% !important;
}

/* Force semua elemen untuk tidak melebar */
.docs-page * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Response containers - LEBAR DIBATASI */
.docs-page .response-output,
.docs-page .response-output pre,
.docs-page .response-output code,
.docs-page .response-output div {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* JSON formatting dengan wrap */
.docs-page .json-string,
.docs-page .json-key {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
    max-width: 100% !important;
}

/* Images tetap responsive tapi tidak melebar */
.docs-page .response-output img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Code blocks wrapping */
.docs-page code {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    display: inline-block !important;
}

/* Prevent any horizontal scroll */
body.docs-page,
main,
section,
aside,
div {
    overflow-x: clip !important;
}

/* ===== SCROLLBAR ===== */
.docs-page ::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}

.docs-page ::-webkit-scrollbar-track { 
    background: #1a1a1a; 
    border-left: 1px solid #2a2a2a; 
}

.docs-page ::-webkit-scrollbar-thumb { 
    background: #7c3aed; 
    border: 2px solid #1a1a1a; 
    border-radius: 4px;
}

.docs-page ::-webkit-scrollbar-thumb:hover { 
    background: #8b5cf6; 
}

/* ===== TERMINAL EFFECTS ===== */
.docs-page .scanline {
    width: 100%; 
    height: 70px;
    z-index: 8;
    background: linear-gradient(0deg, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(167, 139, 250, 0.05) 50%,
        rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 18s linear infinite;
    pointer-events: none;
}

@keyframes scanline { 
    0% { bottom: 100%; } 
    100% { bottom: -100%; } 
}

.docs-page .crt-text { 
    text-shadow: 0 0 1px rgba(167, 139, 250, 0.1);
}

/* ===== TICKER ANIMATION ===== */
@keyframes ticker { 
    0% { transform: translateX(100%) skewX(10deg); } 
    100% { transform: translateX(-100%) skewX(10deg); } 
}

.docs-page .animate-ticker { 
    animation: ticker 35s linear infinite;
    white-space: nowrap; 
    display: inline-block; 
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ===== JSON SYNTAX HIGHLIGHTING ===== */
.docs-page .json-key { 
    color: #c4b5fd; 
    font-weight: bold; 
}

.docs-page .json-string { 
    color: #60a5fa; 
}

.docs-page .json-number { 
    color: #fbbf24; 
}

.docs-page .json-boolean { 
    color: #10b981; 
    font-weight: bold; 
}

.docs-page .json-null { 
    color: #9ca3af; 
    font-style: italic; 
}

/* ===== TERMINAL COLOR CLASSES ===== */
.docs-page .term-success { 
    color: #10b981; 
    font-weight: bold;
}

.docs-page .term-error { 
    color: #ef4444; 
    font-weight: bold;
}

.docs-page .term-warn { 
    color: #f59e0b; 
    font-weight: bold;
}

.docs-page .term-info { 
    color: #60a5fa; 
    font-weight: bold;
}

/* ===== RESPONSE CONTAINER STYLES - TINGGI DIPERBESAR ===== */
.response-container {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height;
    max-height: 300px !important; /* DIPERBESAR */
}

.response-output {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height;
    max-height: 250px !important; /* DIPERBESAR */
}

.response-expanded {
    max-height: 500px !important; /* DIPERBESAR */
}

.output-expanded {
    max-height: 450px !important; /* DIPERBESAR */
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    .docs-page .scanline,
    .docs-page .animate-ticker,
    .response-container,
    .response-output {
        animation: none !important;
        transition: none !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Hardware acceleration */
.folder-card,
.api-card-wrapper,
button,
.response-container,
.response-output {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* ===== CUSTOM SCROLLBAR ===== */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.1);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.3);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 139, 250, 0.5);
}

/* ===== SELECTION STYLES ===== */
::selection {
    background: rgba(167, 139, 250, 0.3);
    color: white;
}

::-moz-selection {
    background: rgba(167, 139, 250, 0.3);
    color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .docs-page .scanline {
        display: none;
    }
    
    .docs-page .animate-ticker {
        animation-duration: 50s;
        font-size: 10px;
    }
    
    .grid {
        grid-template-columns: 1fr !important;
        gap: 3px;
    }
    
    /* Layout mobile: sidebar penuh, content dibawah */
    main {
        grid-template-columns: 1fr !important;
    }
    
    .lg\:col-span-3,
    .lg\:col-span-9 {
        grid-column: span 12 !important;
    }
    
    /* Response containers lebih besar di mobile */
    .response-container {
        max-height: 250px !important;
    }
    
    .response-output {
        max-height: 200px !important;
    }
    
    .response-expanded {
        max-height: 400px !important;
    }
    
    .output-expanded {
        max-height: 350px !important;
    }
    
    /* Better text wrapping on mobile */
    .docs-page .response-output,
    .docs-page .response-output pre,
    .docs-page .response-output code {
        font-size: 10px !important;
        word-break: break-word !important;
    }
    
    /* Sidebar items lebih compact */
    aside {
        gap: 3px !important;
    }
}

/* Mobile kecil */
@media (max-width: 640px) {
    .response-container {
        max-height: 200px !important;
    }
    
    .response-output {
        max-height: 150px !important;
    }
    
    .response-expanded {
        max-height: 350px !important;
    }
    
    .output-expanded {
        max-height: 300px !important;
    }
    
    .profile-pic {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ===== ANIMATIONS ===== */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth transitions for all interactive elements */
button, 
input, 
.folder-card, 
.api-card-wrapper,
.response-container {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent layout shifts */
.api-card-wrapper {
    contain: layout style paint;
}

/* Ensure no horizontal scroll anywhere */
body.docs-page,
main,
section,
.container,
.wrapper {
    overflow-x: clip !important;
    max-width: 100vw !important;
}