/* ========================================================
   ChemHub — Docking Explorer Styles
   ======================================================== */

/* ── Layout ── */
.main-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    padding-bottom: 24px;
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.viewer-section { display: flex; flex-direction: column; }

/* ── Header Purple Overrides ── */
.purple-glow {
    background: radial-gradient(ellipse, var(--accent-purple-glow) 0%, transparent 70%) !important;
}

.purple-icon { color: var(--accent-purple) !important; filter: drop-shadow(0 0 8px var(--accent-purple-glow)) !important; }

.purple-title {
    background: linear-gradient(135deg, var(--accent-purple), #c084fc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── Buttons (purple) ── */
.btn-purple {
    /* Brand primary CTA. Purple is kept elsewhere as Docking's identity color. */
    background: linear-gradient(135deg, var(--accent), #c21875);
    color: #fff;
    box-shadow: 0 2px 16px var(--accent-dim);
}
.btn-purple:hover {
    box-shadow: 0 4px 24px var(--accent-glow);
    transform: translateY(-1px);
}
.btn-purple.loading .btn-text  { opacity: 0; }
.btn-purple.loading .btn-loader { display: block; border-top-color: #fff; }

/* ── Ligand hint ── */
.ligand-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 4px;
}

/* ── Input group ── */
.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

/* ── Info card rows ── */
.info-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}
.placeholder-icon { width: 48px; height: 48px; color: var(--text-muted); }

.info-content { display: flex; flex-direction: column; gap: 12px; }

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 2px;
}
.info-value {
    font-size: 0.88rem;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}
.info-value.accent { color: var(--accent-purple); font-weight: 600; }
.info-value.mono   { font-family: var(--font-mono); font-size: 0.82rem; }

/* Ligand badges */
.ligand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.ligand-pill {
    padding: 2px 8px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    background: var(--accent-purple-dim);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 999px;
    color: var(--accent-purple);
}

/* ── Style Controls ── */
.control-group { margin-bottom: 14px; }

.control-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    display: block;
}

.style-switcher { display: flex; gap: 6px; }

.style-btn {
    flex: 1;
    padding: 8px 4px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration) var(--ease-out);
}
.style-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.style-btn.active {
    background: var(--accent-purple-dim);
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    box-shadow: 0 0 10px var(--accent-purple-dim);
}

.control-actions { display: flex; gap: 8px; }
.control-actions .btn-ghost { flex: 1; }
.btn-ghost svg { width: 14px; height: 14px; }

/* ── WASM Teaser ── */
.wasm-teaser {
    margin-top: 18px;
    padding: 14px;
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.15);
    border-radius: var(--radius-md);
    border-style: dashed;
}

.wasm-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-purple);
    margin-bottom: 8px;
}

.wasm-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 10px;
}

.wasm-coming {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--accent-purple-dim);
    color: var(--accent-purple);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Viewer ── */
.viewer-card {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    min-height: 560px;
}

.viewer-container {
    flex: 1;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(12, 8, 30, 0.9), var(--bg-deep));
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Empty state */
.viewer-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 2;
    pointer-events: none;
    padding: 32px;
    text-align: center;
}
.viewer-empty.hidden { display: none; }

.viewer-empty::before {
    content: "";
    position: absolute;
    inset: 8%;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 330'%3E%3Cg fill='none' stroke='%237b1fa2' stroke-width='3' opacity='.18'%3E%3Cpath d='M102 210c54-88 112-92 174-10s118 77 182-17'/%3E%3Cpath d='M101 122c63 74 124 78 184 12s113-63 173 21'/%3E%3Cpath d='M138 166h284M178 104l58 96M250 83l62 153M334 87l58 122'/%3E%3Ccircle cx='102' cy='210' r='20'/%3E%3Ccircle cx='276' cy='200' r='26'/%3E%3Ccircle cx='458' cy='183' r='22'/%3E%3Ccircle cx='101' cy='122' r='16'/%3E%3Ccircle cx='285' cy='134' r='18'/%3E%3Ccircle cx='458' cy='155' r='16'/%3E%3C/g%3E%3C/svg%3E");
    animation: emptyProteinFloat 7s ease-in-out infinite alternate;
    pointer-events: none;
}

.empty-protein-anim {
    position: relative;
    width: 120px;
    height: 100px;
    z-index: 1;
}

.helix-strand {
    position: absolute;
    width: 2px;
    height: 80px;
    border-radius: 999px;
    top: 10px;
}

.strand-1 {
    background: linear-gradient(180deg, var(--accent-purple), transparent);
    left: 40px;
    animation: helixWave 2s ease-in-out infinite;
}

.strand-2 {
    background: linear-gradient(180deg, transparent, var(--accent-purple));
    left: 60px;
    animation: helixWave 2s ease-in-out infinite 0.5s;
}

.helix-dot, .dot-2 {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent-purple);
    box-shadow: 0 0 10px var(--accent-purple-glow);
}
.helix-dot { top: 10px; left: 46px; animation: helixBounce 2s ease-in-out infinite; }
.dot-2     { bottom: 10px; left: 56px; animation: helixBounce 2s ease-in-out infinite 1s; }

@keyframes helixWave {
    0%, 100% { transform: scaleX(1); opacity: 0.6; }
    50%       { transform: scaleX(3); opacity: 1; }
}
@keyframes helixBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%       { transform: translateY(60px); opacity: 0.4; }
}

.empty-text {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 700;
    text-align: center;
    max-width: 280px;
}
.empty-hint {
    position: relative;
    z-index: 1;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

@keyframes emptyProteinFloat {
    from { transform: translateY(0) rotate(1deg); opacity: 0.65; }
    to { transform: translateY(-10px) rotate(-2deg); opacity: 1; }
}

[data-theme="light"] .viewer-container {
    background: #f0f2f5;
}

[data-theme="light"] .style-btn,
[data-theme="light"] .btn-ghost {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #374151;
}

/* 3Dmol div fade-in */
.mol-viewer-div { animation: viewerFadeIn 0.5s ease forwards; }
@keyframes viewerFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Responsive ── */
@media (max-width: 960px) {
    .main-layout { grid-template-columns: 1fr; }
    .viewer-card { min-height: 420px; }
}
@media (max-width: 600px) {
    .input-group { flex-direction: column; }
    .style-switcher { flex-direction: column; }
    .control-actions { flex-direction: column; }
}

[data-theme="light"] :is(.text-input, input, textarea, select) {
    background: #ffffff;
    border-color: #d7dee8;
    color: #111827;
}

[data-theme="light"] :is(.text-input, input, textarea, select)::placeholder { color: #64748b; }

[data-theme="light"] :is(.text-input, input, textarea, select):focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

[data-theme="light"] :is(.chip, .style-btn, .btn-ghost, .back-link) {
    background: #ffffff;
    border-color: #d7dee8;
    color: #334155;
}

[data-theme="light"] :is(.chip, .style-btn, .btn-ghost, .back-link):hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="light"] .card-title { color: #1f2937; }