/**
 * gen-modals.css — Shared Generation Modal Styles
 * Used by workspace and discover pages
 */

/* Generation Modal Overlay */
.gen-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); z-index: 100001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.35s ease; }
.gen-modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* Generation Modal */
.gen-modal { position: relative; width: 640px; max-width: 95vw; max-height: 85vh; background: rgba(38, 38, 38, 0.94); backdrop-filter: blur(36px) saturate(160%); -webkit-backdrop-filter: blur(36px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 25px 80px rgba(0, 0, 0, 0.5); overflow: hidden; transform: scale(0.85) translateY(20px); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gen-modal-overlay.active .gen-modal { transform: scale(1) translateY(0); opacity: 1; }

/* Modal Header */
.gen-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.gen-modal-header .modal-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(212, 168, 67, 0.2); border-radius: 8px; margin-right: 12px; }
.gen-modal-header .modal-icon svg { width: 18px; height: 18px; stroke: #e8c060; fill: none; }
.gen-modal-header .modal-title { font-size: 1.05rem; font-weight: 600; color: #fff; flex: 1; }
.gen-modal-header .modal-close { width: 32px; height: 32px; border: none; background: rgba(255, 255, 255, 0.05); border-radius: 8px; color: rgba(255,255,255,0.4); font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.gen-modal-header .modal-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Modal Content */
.gen-modal-content { padding: 16px 20px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

/* Modal Section */
.modal-section { display: flex; flex-direction: column; gap: 8px; }
.modal-section-title { font-size: 0.85rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }

/* Modal Footer */
.gen-modal-footer { padding: 16px 20px; background: rgba(32, 32, 32, 0.6); border-top: 1px solid rgba(255,255,255,0.05); display: flex; gap: 12px; backdrop-filter: blur(10px); }
.modal-btn { flex: 1; padding: 12px 20px; border: none; border-radius: 10px; font-size: 0.88rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; }
.modal-btn.primary { background: #d4a843; color: white; }
.modal-btn.primary:hover { background: #e8c060; }
.modal-btn.secondary { background: rgba(255, 255, 255, 0.06); color: rgba(255,255,255,0.6); border: 1px solid rgba(255, 255, 255, 0.08); }
.modal-btn.secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* AI Model Dropdown */
.ai-model-select { width: 100%; padding: 12px 16px; background: rgba(38, 38, 38, 0.94); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; color: #fff; font-size: 0.85rem; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: all 0.2s; }
.ai-model-select:hover { border-color: #d4a843; }
.ai-model-select:focus { outline: none; border-color: #d4a843; box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.2); }
.ai-model-select option { background: #262626; color: #fff; padding: 10px; }

/* Image Mode Tabs */
.image-mode-tabs { display: flex; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.img-tab { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 0.8rem; cursor: pointer; padding: 4px 0; position: relative; transition: color 0.2s; display: flex; align-items: center; }
.img-tab:hover { color: rgba(255,255,255,0.6); }
.img-tab.active { color: #d4a843; font-weight: 500; }
.img-tab.active::after { content: ''; position: absolute; bottom: -9px; left: 0; right: 0; height: 2px; background: #d4a843; border-radius: 1px; }

/* Split layout */
.image-modal-split { display: flex; gap: 0; min-height: 380px; }
.image-modal-left { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid rgba(255,255,255,0.06); }
.image-modal-right { width: 280px; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }

/* Upload Zone */
.upload-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed rgba(255,255,255,0.12); border-radius: 12px; cursor: pointer; transition: all 0.2s; min-height: 200px; gap: 8px; }
.upload-zone:hover { border-color: rgba(212,168,67,0.4); background: rgba(212,168,67,0.04); }
.upload-zone.dragover { border-color: #d4a843; background: rgba(212,168,67,0.08); }
.upload-zone-icon { color: rgba(255,255,255,0.2); }
.upload-zone-text { font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.upload-zone-hint { font-size: 0.7rem; color: rgba(255,255,255,0.25); }
.upload-zone.has-image { border-style: solid; border-color: rgba(212,168,67,0.5); padding: 0; overflow: hidden; }
.upload-zone.has-image img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }

/* Text prompt area */
.text-prompt-area { flex: 1; display: flex; flex-direction: column; }
.text-prompt-area textarea { flex: 1; width: 100%; padding: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: #fff; font-size: 0.88rem; font-family: inherit; resize: none; outline: none; transition: border-color 0.15s; min-height: 180px; }
.text-prompt-area textarea:focus { border-color: rgba(212,168,67,0.4); }
.text-prompt-area textarea::placeholder { color: rgba(255,255,255,0.25); }
.prompt-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; }
.prompt-guide { font-size: 0.72rem; color: rgba(255,255,255,0.3); text-decoration: none; }
.prompt-guide:hover { color: rgba(255,255,255,0.5); }
.char-count { font-size: 0.72rem; color: rgba(255,255,255,0.25); }

/* Faces Options */
.faces-options { display: flex; gap: 8px; }
.faces-btn { flex: 1; padding: 10px 8px; background: rgba(48, 48, 48, 0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.faces-btn:hover { border-color: rgba(212, 168, 67, 0.4); color: #fff; }
.faces-btn.active { background: rgba(212, 168, 67, 0.2); border-color: #d4a843; color: white; }

/* License Toggle */
.license-toggle { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); }
.license-btn { flex: 1; padding: 10px 16px; background: rgba(48, 48, 48, 0.6); border: none; color: rgba(255,255,255,0.6); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.license-btn:first-child { border-right: 1px solid rgba(255,255,255,0.08); }
.license-btn:hover { background: rgba(60, 60, 70, 0.6); color: #fff; }
.license-btn.active { background: rgba(212, 168, 67, 0.25); color: white; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: rgba(60, 60, 70, 0.8); border-radius: 12px; transition: 0.2s; }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 2px; bottom: 2px; background: white; border-radius: 50%; transition: 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: linear-gradient(135deg, #d4a843, #db2777); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Generation Cost Display */
.gen-cost-display { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.gen-cost-display .cost-icon { width: 18px; height: 18px; }
.gen-cost-display .cost-value { font-weight: 600; color: #fbbf24; }

/* Multi-view Grid */
.multiview-container { display: flex; flex-direction: column; gap: 12px; }
.multiview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.multiview-slot { aspect-ratio: 1; background: rgba(38, 38, 38, 0.9); border: 2px dashed rgba(255,255,255,0.1); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; }
.multiview-slot:hover { border-color: #d4a843; background: rgba(212, 168, 67, 0.08); }
.multiview-slot.has-image { border-style: solid; border-color: rgba(59, 130, 246, 0.5); }
.multiview-slot .slot-icon { color: rgba(255,255,255,0.3); margin-bottom: 2px; }
.multiview-slot .slot-label { font-size: 0.55rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.5px; }
.multiview-slot .slot-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; padding: 4px; }
.multiview-slot .slot-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; color: rgba(255,255,255,0.8); font-size: 0; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2; }
.multiview-slot.has-image:hover .slot-remove { display: flex; }
.multiview-slot .slot-remove:hover { background: rgba(239,68,68,0.85); color: #fff; }
.multiview-slot input[type="file"] { display: none; }

.multiview-counter { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(48, 48, 48, 0.6); border-radius: 6px; font-size: 0.75rem; }
.multiview-counter .count { color: #fff; font-weight: 500; }
.multiview-counter .count.valid { color: #22c55e; }
.multiview-counter .count.invalid { color: #ef4444; }
.multiview-counter .hint { color: rgba(255,255,255,0.3); font-size: 0.7rem; }

/* ── Discover Create Button ── */
.discover-create-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
}

.discover-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #d4a843 0%, #c49a2e 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(212, 168, 67, 0.3), 0 1px 3px rgba(0,0,0,0.2);
    position: relative;
    z-index: 10001;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    white-space: nowrap;
}
.discover-create-btn:hover {
    background: linear-gradient(135deg, #e8c060 0%, #d4a843 100%);
    box-shadow: 0 6px 24px rgba(212, 168, 67, 0.4), 0 2px 6px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}
.discover-create-btn:active { transform: translateY(0); }
.discover-create-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Create dropdown — fixed relative to wrapper, not flex container */
.discover-create-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 240px;
    background: rgba(38, 38, 38, 0.94);
    backdrop-filter: blur(36px) saturate(160%);
    -webkit-backdrop-filter: blur(36px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 50px rgba(0, 0, 0, 0.6);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 10002;
}
.discover-create-dropdown.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.discover-create-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(38, 38, 38, 0.94);
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 2px;
}
.discover-create-dropdown-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: rgba(255,255,255,0.75);
    font-size: 0.88rem;
    font-weight: 600;
    user-select: none;
    -webkit-user-select: none;
}
.discover-create-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.discover-create-dropdown-item:active {
    background: rgba(212, 168, 67, 0.15);
}
.discover-create-dropdown-item svg {
    width: 22px;
    height: 22px;
    stroke: #d4a843;
    fill: none;
    flex-shrink: 0;
}
.discover-create-dropdown-item .item-desc {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    font-weight: 400;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .gen-modal { width: 95vw; max-height: 90vh; }
    .image-modal-split { flex-direction: column; min-height: auto; }
    .image-modal-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); min-height: 250px; }
    .image-modal-right { width: 100%; }
    .discover-create-btn { padding: 8px 16px; font-size: 0.82rem; }
}