/* Compact overrides for atomic-lab-3d */

/* Wider panel */
.controls {
    bottom: 10px !important;
    padding: 10px 30px !important;
    min-width: 850px !important;
    width: 850px !important;
}

/* Element info section */
.element-info {
    padding-right: 25px !important;
    min-width: 160px !important;
    width: 160px !important;
}

/* Smaller symbol with scaled alterations */
.element-symbol {
    font-size: 2rem !important;
    min-height: auto !important;
    display: block !important;
    margin-bottom: 4px !important;
    font-feature-settings: 'sups' 1 !important; /* Enable proper superscript */
}

/* Make superscript alterations much smaller */
.element-symbol {
    position: relative !important;
}

/* Custom styling for superscript characters */
.element-symbol::after {
    font-size: 0.6em !important;
}

/* Element name with fixed size */
.element-name {
    font-size: 0.85rem !important;
    padding: 2px 6px !important;
    margin: 2px 8px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 100px !important;
    max-width: 145px !important;
    display: block !important;
    position: relative !important;
    text-align: center !important;
}

/* Tooltip for full name */
.element-name::after {
    content: attr(data-full-name);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.element-name:hover::after {
    opacity: 1;
}

/* Smaller atomic number */
.atomic-number {
    font-size: 0.7rem !important;
}

/* Particle controls with more space */
.particle-controls {
    gap: 30px !important;
    min-width: 500px !important;
}

.particle-group {
    gap: 4px !important;
    min-width: 140px !important;
}

.particle-label {
    font-size: 0.7rem !important;
    gap: 3px !important;
}

.particle-indicator {
    width: 8px !important;
    height: 8px !important;
}

.particle-adjuster {
    gap: 4px !important;
}

.particle-count {
    font-size: 1rem !important;
    min-width: 24px !important;
}

.btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 1rem !important;
}

/* Compact selector */
.element-selector {
    gap: 2px !important;
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
}

.selector-label {
    font-size: 0.65rem !important;
}

.element-search {
    font-size: 0.75rem !important;
    padding: 3px 6px !important;
}

.nav-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.6rem !important;
}

/* Controls gap */
.controls {
    gap: 40px !important;
}

.controls-right {
    gap: 10px !important;
    min-width: 600px !important;
}

/* Dropdown smaller */
.search-dropdown {
    max-height: 120px !important;
}

.search-option {
    padding: 1px 3px !important;
    gap: 2px !important;
    font-size: 0.7rem !important;
}

.search-option .element-symbol {
    font-size: 0.65rem !important;
    min-width: 18px !important;
}

.search-option .element-name-search {
    font-size: 0.65rem !important;
}

.search-option .atomic-num {
    font-size: 0.55rem !important;
}