/* --- GAYA GLOBAL & DASAR --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    touch-action: manipulation;
    overflow-x: hidden;
}

* {
    -webkit-tap-highlight-color: transparent;
}

.tool-body {
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.tool-card {
     background: rgba(30, 41, 59, 0.5);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(51, 65, 85, 0.5);
}

.view-enter {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
    to { opacity: 1; }
}


/* --- GAYA UNTUK AI CHAT --- */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #1e293b; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }

.chat-loading-fixed {
    position: absolute;
    bottom: 90px;
    left: 1rem;
    right: auto;
    display: flex;
    justify-content: flex-start;
    z-index: 10;
    pointer-events: none;
}
.chat-loading-fixed > div {
    pointer-events: auto;
}

.typing-indicator { display: flex; align-items: center; }
.typing-dot { width: 8px; height: 8px; margin: 0 2px; background-color: #9ca3af; border-radius: 50%; animation: typing-bounce 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

pre { position: relative; background-color: #111827; color: #d1d5db; padding: 1rem; border-radius: 8px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; margin: 0.5rem 0; border: 1px solid #374155; }
pre code { white-space: pre; word-wrap: normal; }
.copy-code-btn { position: absolute; top: 8px; right: 8px; background-color: #4b5563; color: #e5e7eb; border: none; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; opacity: 0.2; transition: opacity 0.2s, background-color 0.2s; }
pre:hover .copy-code-btn { opacity: 1; }
.copy-code-btn:hover { background-color: #6b7280; }


/* --- GAYA UNTUK TIKTOK DOWNLOADER --- */
.tiktok-tool-body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 42, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0); } }
.slide-container { display: flex; overflow-x: auto; gap: 15px; padding: 15px 0; scrollbar-width: none; -ms-overflow-style: none; }
.slide-container::-webkit-scrollbar { display: none; }
.slide-image { min-width: 150px; height: 150px; object-fit: cover; border-radius: 12px; border: 3px solid #fff; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.slide-image:hover { transform: scale(1.08); box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
.video-preview-large, .slide-preview-large { width: 100%; height: 50vh; max-height: 600px; min-height: 300px; object-fit: contain; border-radius: 16px; background: #000; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
#tiktok-result { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; opacity: 0; transform: translateY(20px); pointer-events: none; }
#tiktok-result.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* --- GAYA UNTUK TENSOR DETECTOR & OCR --- */
.loader { border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 4px solid #fff; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.drop-area-base { border: 3px dashed #475569; border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: all 0.3s ease; }
.drop-area-highlight { border-color: #f59e0b; background-color: rgba(51, 65, 85, 0.5); }
.result-box { border: 1px solid transparent; transition: all 0.2s ease-in-out; }


/* --- GAYA UNTUK PDF MERGER (YANG SEBELUMNYA HILANG) --- */
#fileInput {
    display: none;
}
.btn {
    background: #38bdf8; /* Sky 400 */
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s;
    width: 100%;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn:hover:not(:disabled) {
    background: #0ea5e9; /* Sky 500 */
}
.btn:disabled {
    background: #475569; /* Slate 600 */
    cursor: not-allowed;
    opacity: 0.6;
}
.drop-area {
    border: 3px dashed #475569;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.5);
    transition: all 0.3s;
}
.drop-area:hover, .drop-area.dragover {
    background: rgba(30, 41, 59, 0.5);
    border-color: #38bdf8;
}
.drop-area .icon-lucide {
    stroke-width: 1.5;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}
.preview-item {
    position: relative;
    width: 150px;
    border: 1px solid #334155;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1e293b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: move;
}
.preview-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.preview-item .index {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
}
.preview-item .remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(231, 76, 60, 0.8);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.preview-item .remove:hover { background: #c0392b; }
.success { color: #27ae60; }
.error { color: #e74c3c; }
.info { color: #3498db; }


/* --- GAYA UNTUK DIAGRAM EDITOR --- */
.switch { position: relative; display: inline-block; width: 40px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4A5568; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #2563EB; }
input:focus + .slider { box-shadow: 0 0 1px #2563EB; }
input:checked + .slider:before { transform: translateX(16px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }

.loader-mermaid {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #fb923c;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

#face-rec-view .face-rec-card { background-color: rgba(15, 23, 42, 0.5); padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid #334155; }
#face-rec-view .face-rec-card h2 { font-size: 18px; margin-bottom: 5px; display: flex; align-items: center; color: #cbd5e1; }
#face-rec-view .face-rec-card h2 .step-number { background-color: #3b82f6; color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; font-size: 14px; margin-right: 10px; }
#face-rec-view .face-rec-card p { font-size: 14px; color: #94a3b8; margin-bottom: 15px; }
#face-rec-view .upload-area { text-align: center; border: 2px dashed #475569; border-radius: 8px; padding: 20px; margin-top: 15px; }
#face-rec-view .image-preview { width: 100%; max-height: 250px; object-fit: contain; border-radius: 8px; margin-top: 15px; display: none; }
#face-rec-view .button-group { display: flex; gap: 10px; }
#face-rec-view .face-rec-btn { font-family: 'Poppins', sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 12px; font-size: 15px; font-weight: 500; border: none; border-radius: 8px; background: linear-gradient(145deg, #60a5fa, #3b82f6); color: white; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); }
#face-rec-view .face-rec-btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
#face-rec-view .face-rec-btn.danger { background: linear-gradient(145deg, #f17b6c, #e74c3c); }
#face-rec-view .face-rec-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); }
#face-rec-view .face-rec-btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
#face-rec-view .face-rec-btn:disabled { background: #475569; cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.7; }
#face-rec-view input[type="text"] { width: 100%; padding: 12px; font-size: 15px; border-radius: 8px; border: 1px solid #475569; background-color: #1e293b; color: #cbd5e1; margin-bottom: 15px; }
#face-rec-view input[type="file"] { display: none; }
#face-rec-view .face-rec-result { padding: 15px; border-radius: 8px; margin-top: 15px; font-weight: 500; text-align: center; display: none; }
#face-rec-view .face-rec-result.success { background-color: #27ae60; color: white; }
#face-rec-view .face-rec-result.error { background-color: #e74c3c; color: white; }
#face-rec-view .face-rec-result.info { background-color: #475569; color: #e2e8f0; }
#face-rec-view .threshold-control { margin-top: 20px; }
#face-rec-view .threshold-control label { display: block; font-size: 14px; color: #94a3b8; margin-bottom: 10px; text-align: center; }
#face-rec-view .threshold-control input[type="range"] { width: 100%; cursor: pointer; }
#face-rec-view #known-faces-list { list-style-type: none; padding: 0; margin-top: 15px; }
#face-rec-view #known-faces-list li { background-color: #1e293b; color: #cbd5e1; padding: 8px 12px; border-radius: 6px; margin-bottom: 5px; font-size: 14px; }
/* pastikan loader tersembunyi secara default; hanya tampil saat JS men-set display */
#face-rec-view #loader { display: none; margin: 12px auto; }