/* Project Modal */
#project-modal { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(15px); z-index: 5000; }
.modal-content { height: 85vh !important; max-height: 85vh !important; display: flex; flex-direction: column; }
@media (min-width: 768px) { .modal-content { flex-direction: row; } }

/* Thumbnails */
#modal-thumbs-container { justify-content: center; background: #050505; padding: 10px; }
.thumbs-scroll::-webkit-scrollbar { height: 4px; }
.thumbs-scroll::-webkit-scrollbar-track { background: #111; }
.thumbs-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.thumbs-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
.thumb-btn {
    opacity: 0.5; transition: all 0.3s; border: 2px solid transparent; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
}
.thumb-btn:hover { opacity: 0.9; transform: translateY(-2px); }
.thumb-btn.active {
    opacity: 1; border-color: var(--color-accent); transform: scale(1.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.carousel-btn {
    background: rgba(0, 0, 0, 0.6); color: white; border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s; backdrop-filter: blur(4px);
}
.carousel-btn:hover { background: var(--color-accent); color: black; border-color: var(--color-accent); }

/* Tabs */
.tab-btn { padding-bottom: 10px; border-bottom: 2px solid transparent; color: #666; transition: all 0.3s; }
.tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tab-content { display: none; animation: fadeIn 0.4s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Contact Modal (Unity Style) */
#inspector-window { box-shadow: 0 0 40px rgba(0, 0, 0, 0.8); }
.cursor-ew-resize { cursor: ew-resize; }
#unity-form input:focus, #unity-form textarea:focus { border-color: #3A79BB !important; background-color: #2a2a2a; }
#unity-form textarea::-webkit-scrollbar { width: 8px; background: #282828; }
#unity-form textarea::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
#unity-form textarea::-webkit-scrollbar-thumb:hover { background: #777; }

/* Commission Modal */
#commission-modal.active { opacity: 1; pointer-events: auto; }
#commission-modal.active #commission-content { transform: scale(1); }
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em;
}

/* Mobile Modal Fixes */
@media (max-width: 768px) {
    #project-modal { padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; }
    .modal-content {
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100dvh !important; max-height: none !important; border: none !important;
        border-radius: 0 !important; margin: 0 !important; background: #000 !important;
        display: flex !important; flex-direction: column !important; overflow: hidden !important;
    }
    .modal-content > div:first-child { width: 100% !important; height: 30dvh !important; flex: none !important; }
    #media-container, #media-container img, #media-container video, #media-container iframe {
        width: 100% !important; height: 100% !important; object-fit: contain !important; position: absolute; inset: 0; margin: auto;
    }
    #modal-thumbs-container { display: none !important; }
    .modal-content > div:last-child { flex: 1 !important; width: 100% !important; background: #0a0a0a !important; display: flex !important; flex-direction: column !important; }
    .text-scroll { flex: 1 1 auto !important; height: 100% !important; overflow-y: auto !important; }
    #modal-action-bar { flex: none !important; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
}