/* =========================================
   1. EXTERNAL RESOURCES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css');
@import url('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css');


/* =========================================
   2. CORE LAYOUT (GLOBAL RESET)
   ========================================= */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Mencegah scroll pada body utama */
    background-color: #131314;
    font-family: 'Inter', sans-serif;
    color: #e3e3e3;
    -webkit-tap-highlight-color: transparent;
}

body {
    display: flex;
    flex-direction: column;
}

nav {
    flex-shrink: 0;
    background-color: #131314;
    z-index: 50;
    height: 64px;
    /* Safe Area Fix untuk Poni/Notch */
    padding-top: env(safe-area-inset-top); 
    min-height: 64px;
    height: auto;
}

/* Container Utama (Sidebar + Main) */
/* Desktop Default: Horizontal (Row) */
body > div.flex-grow {
    height: calc(100vh - 64px); /* Fallback */
    height: calc(100dvh - 64px); 
    overflow: hidden;
    display: flex;
    position: relative;
    flex-direction: row; 
}

/* Main Content Area */
main {
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* =========================================
   3. SECTION SPECIFIC LAYOUTS
   ========================================= */

/* CHAT: Flex Column (Agar Input Sticky di Bawah) */
#chatSection {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#chatHistory {
    flex-grow: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* AUDIO & SETTINGS: Simple Scroll */
#audioSection, #settingsSection {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* IMAGE & STORYBOARD (DESKTOP DEFAULT) */
#imageSection,
#storyboardSection {
    display: flex;
    flex-direction: row; /* Kiri Panel, Kanan Hasil */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Panel Kiri Desktop (Controls) */
#imageSection > div:first-child,
#storyboardSection > div:first-child {
    width: 400px;
    height: 100%;
    overflow-y: auto;
    flex-shrink: 0;
    border-right: 1px solid #444746;
}

/* Panel Kanan Desktop (Results) */
#imageDisplayArea,
#storyboardSection > div:last-child {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
}


/* =========================================
   4. ANIMATIONS & VISUAL EFFECTS
   ========================================= */
/* Fade In Transition */
.animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.2, 0, 0, 1) forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Gradient Text Shine (Halo, ShareIn AI) */
.animate-gradient-text {
    background-size: 200% auto;
    animation: shine 4s linear infinite;
}
@keyframes shine {
    to { background-position: 200% center; }
}

/* Sidebar & Overlay Transitions */
#sidebar { transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1); will-change: transform; }
#sidebarOverlay { transition: opacity 0.3s ease, backdrop-filter 0.3s ease; backdrop-filter: blur(4px); }
#sidebarOverlay.hidden { opacity: 0; pointer-events: none; backdrop-filter: blur(0px); }

/* Spin Animation for Sparkles */
@keyframes spinSlow { to { transform: rotate(360deg); } }


/* =========================================
   5. UI COMPONENTS STYLING
   ========================================= */
/* Inputs */
input, textarea, select {
    background-color: #1e1f20 !important;
    border-color: transparent !important;
    color: #e3e3e3 !important;
}
input:focus, textarea:focus, select:focus { outline: none; }

/* Custom Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #444746 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #444746; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #5e5e5e; }

/* Toast Notification */
#toast-container { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast {
    background: #28292a; color: #e3e3e3; padding: 14px 20px; border-radius: 12px; border: 1px solid #444746; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 500;
    animation: slideIn 0.3s cubic-bezier(0.2, 0, 0, 1) forwards; pointer-events: auto; min-width: 280px; max-width: 380px;
}
.toast.success i { color: #a8c7fa; } .toast.error i { color: #f2b8b5; } .toast.info i { color: #e3e3e3; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Lightbox */
#lightbox { transition: opacity 0.2s ease; }
#lightboxImg { transition: transform 0.1s linear; will-change: transform; touch-action: none; }

/* Canvas Utilities */
.cursor-crosshair { cursor: crosshair !important; }
canvas { touch-action: none; }

/* Range Slider */
input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #a8c7fa; cursor: pointer; margin-top: -4px; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #444746; border-radius: 2px; }


/* =========================================
   6. CHAT STYLING (GEMINI STYLE)
   ========================================= */

/* Wrapper per pesan (Baris) */
.message-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 24px; /* Jarak antar percakapan */
}

/* User Alignment */
.message-wrapper.user {
    justify-content: flex-end;
}

/* AI Alignment */
.message-wrapper.ai {
    justify-content: flex-start;
    gap: 16px; /* Jarak antara Ikon AI dan Teks */
    align-items: flex-start;
}

/* Ikon AI (Sparkle) */
.ai-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px; /* Sejajar dengan baris pertama teks */
}
.ai-avatar i {
    color: #a8c7fa; /* Warna biru khas Gemini */
    animation: spinSlow 10s linear infinite;
}

/* User Bubble: Bentuk Pil, Dark Grey */
.chat-bubble-user { 
    background-color: #28292a; 
    color: #e3e3e3; 
    padding: 12px 24px; 
    border-radius: 24px; 
    font-size: 1rem; 
    line-height: 1.6;
    max-width: 80%;
    align-self: flex-end;
    margin-left: auto;
    border: none;
    
    /* Mencegah teks keluar jalur */
    word-break: break-word;      /* Memaksa kata panjang putus */
    overflow-wrap: anywhere;     /* Standar modern untuk wrapping */
    white-space: pre-wrap;       /* Menjaga enter/baris baru tetap ada */
}

/* AI Bubble: Transparan, Lebar Penuh */
.chat-bubble-ai { 
    background: transparent; 
    padding: 0; 
    color: #e3e3e3; 
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.75;
    
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* =========================================
   7. MARKDOWN TYPOGRAPHY (PROSE CUSTOM)
   ========================================= */

.prose-custom {
    color: #e3e3e3;
    font-family: 'Inter', sans-serif;
}

/* Paragraf */
.prose-custom p { 
    margin-bottom: 1.25em; 
    line-height: 1.75; 
    letter-spacing: 0.01em;
}

/* Headings */
.prose-custom h1, 
.prose-custom h2, 
.prose-custom h3 {
    color: #ffffff;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}
.prose-custom h1 { font-size: 1.5rem; }
.prose-custom h2 { font-size: 1.25rem; }
.prose-custom h3 { font-size: 1.1rem; }

/* Lists */
.prose-custom ul, 
.prose-custom ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}
.prose-custom li {
    margin-bottom: 0.5em;
    padding-left: 0.5em;
}
.prose-custom ul { list-style-type: disc; }
.prose-custom ol { list-style-type: decimal; }
.prose-custom li::marker { color: #8e918f; }

/* Inline Code */
.prose-custom :not(pre) > code {
    background-color: #28292a;
    color: #e3e3e3;
    padding: 2px 6px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    border: 1px solid #444746;
}

/* Code Block Wrapper (Container) */
.code-block-wrapper {
    margin-bottom: 1.5em;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #444746;
    background-color: #1e1f20;
}

/* Header Code Block (Lang + Copy) */
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #28292a;
    border-bottom: 1px solid #444746;
    font-size: 0.75rem;
    color: #c4c7c5;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Pre Element inside Wrapper */
.prose-custom pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 16px;
    background: #1e1f20;
    overflow-x: auto;
}

/* Blockquote */
.prose-custom blockquote {
    border-left: 3px solid #a8c7fa;
    padding-left: 1.25em;
    margin: 1.5em 0;
    font-style: italic;
    color: #c4c7c5;
    background: linear-gradient(to right, rgba(168, 199, 250, 0.05), transparent);
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 0 8px 8px 0;
}

/* Tables */
.prose-custom table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    margin: 1.5em 0;
    border: 1px solid #444746;
    border-radius: 12px;
    overflow: hidden;
    display: table; /* Reset display block from old css */
}
.prose-custom th, .prose-custom td {
    padding: 12px 16px;
    border-bottom: 1px solid #444746;
    text-align: left;
    border-right: none;
    border-left: none;
    border-top: none;
}
.prose-custom th {
    background-color: #28292a;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
}
.prose-custom tr:last-child td { border-bottom: none; }
.prose-custom tr:hover td { background-color: rgba(255, 255, 255, 0.03); }
.prose-custom strong { color: #ffffff; font-weight: 600; }


/* =========================================
   8. MOBILE RESPONSIVE FIXES (CRITICAL)
   ========================================= */
@media (max-width: 768px) {
    /* Navbar Toggle */
    #toggleSidebar { display: flex !important; }
    
    /* Font Adjustment */
    .prose-custom { font-size: 0.95rem; }
    input, textarea, select { font-size: 16px !important; } /* Mencegah iOS Zoom */

    /* === IMAGE & STORYBOARD STUDIO MOBILE LAYOUT (VERTIKAL) === */
    /* Ubah dari Flex Row ke Block agar memanjang ke bawah & BISA DI-SCROLL */
    #imageSection,
    #storyboardSection {
        display: block !important; 
        flex-direction: column;
        overflow-y: auto !important; /* Scroll Container Aktif */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
    }

    /* Panel Kontrol (Bagian Atas - Sidebar) */
    #imageSection > div:first-child,
    #storyboardSection > div:first-child {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border-right: none;
        border-bottom: 1px solid #444746;
        overflow: visible !important;
        flex-shrink: 0;
    }

    /* Komponen Input Lebih Besar di HP */
    #imagePrompt, #storyIdea { height: 120px !important; }
    
    #inpaintingContainer, #slot1, #slot2 { 
        height: 350px !important; 
        background-color: #000; 
        margin-bottom: 10px; 
    }
    #tabRef1, #tabRef2 { 
        padding-top: 10px !important; 
        padding-bottom: 10px !important; 
    }

    /* Panel Hasil (Bagian Bawah) */
    #imageDisplayArea,
    #storyboardSection > div:last-child {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        /* Padding Bawah Ekstra BESAR agar tombol/gambar terakhir tidak tertutup */
        padding-bottom: 250px !important; 
        padding-top: 20px;
        display: block !important;
    }

    /* Grid Gambar 1 Kolom di HP */
    #imgGrid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
        height: auto !important;
    }
}

/* Sembunyikan Hamburger di Desktop */
@media (min-width: 1024px) {
    #toggleSidebar { display: none !important; }
}


/* =========================================
   9. VISIBILITY FIX (HUKUM BESI)
   ========================================= */
/* Aturan ini WAJIB ada di paling bawah. */
/* Tujuannya: Memastikan elemen dengan class 'hidden' BENAR-BENAR HILANG */

.hidden, 
[hidden], 
#chatSection.hidden, 
#imageSection.hidden, 
#storyboardSection.hidden,
#audioSection.hidden, 
#settingsSection.hidden {
    display: none !important;
}

/* TAMBAHAN UNTUK MASKING MODAL */

#maskingModal {
    animation: slideUp 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Pastikan cursor crosshair muncul di canvas */
#modalDrawCanvas {
    cursor: crosshair;
}

/* Responsive adjustment untuk modal controls */
@media (max-width: 768px) {
    #maskingModal .h-14 { padding-top: env(safe-area-inset-top); height: auto; padding-bottom: 10px; }
}


/* =========================================
   10. SAFE AREA FIX (IPHONE/ANDROID GESTURE)
   ========================================= */
/* Tambahkan padding ekstra di bagian bawah container input chat */
#chatSection > div:last-child {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Fix untuk Modal Masking agar tombol bawah tidak kepotong */
#maskingModal .h-auto {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
}