/* Scene color before the app sets it: #f1f1f1, or black in dark mode, like the default scene */
:root {
    --startup-scene: #f1f1f1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --startup-scene: #000000;
    }
}

/* Modern shadcn/ui inspired styling */
* {
    box-sizing: border-box;
}

/* Clerk Authentication Styles */
.auth-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--startup-scene);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}



/* Clerk component styling - Modern Design */
.auth-container [data-clerk-sign-in],
.auth-container [data-clerk-sign-up] {
    width: 100%;
}

/* Clerk Form Container */
.auth-container .clerk-form {
    width: 100%;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Clerk Input Fields */
.auth-container .clerk-form input,
.auth-container .clerk-form input[type="email"],
.auth-container .clerk-form input[type="password"],
.auth-container .clerk-form input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    background: #ffffff;
    color: #1f2937;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.auth-container .clerk-form input:focus {
    outline: none;
    border-color: #222;
    box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.1);
}

.auth-container .clerk-form input::placeholder {
    color: #9ca3af;
}

/* Clerk Buttons */
.auth-container .clerk-form button,
.auth-container .clerk-form button[type="submit"] {
    width: 100%;
    padding: 12px 16px;
    background: #222;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.auth-container .clerk-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.auth-container .clerk-form button:active {
    transform: translateY(0);
}

/* Clerk Secondary Buttons (like "Sign in instead") */
.auth-container .clerk-form button[data-variant="secondary"] {
    background: transparent;
    color: #222;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}

.auth-container .clerk-form button[data-variant="secondary"]:hover {
    background: #f9fafb;
    border-color: #222;
    transform: none;
}

/* Clerk Form Labels */
.auth-container .clerk-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

/* Clerk Form Groups */
.auth-container .clerk-form .form-group {
    margin-bottom: 20px;
}

/* Clerk Error Messages */
.auth-container .clerk-form .error-message,
.auth-container .clerk-form [data-clerk-error] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

/* Clerk Success Messages */
.auth-container .clerk-form .success-message {
    color: #059669;
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
}

/* Clerk Divider */
.auth-container .clerk-form .divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #6b7280;
    font-size: 12px;
}

.auth-container .clerk-form .divider::before,
.auth-container .clerk-form .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.auth-container .clerk-form .divider::before {
    margin-right: 12px;
}

.auth-container .clerk-form .divider::after {
    margin-left: 12px;
}

/* Clerk Social Buttons */
.auth-container .clerk-form .social-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.auth-container .clerk-form .social-button {
    flex: 1;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-container .clerk-form .social-button:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

/* Clerk Loading States */
.auth-container .clerk-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Clerk Form Validation */
.auth-container .clerk-form input:invalid {
    border-color: #dc2626;
}

.auth-container .clerk-form input:valid {
    border-color: #10b981;
}

/* Responsive Design */
@media (max-width: 480px) {
    .auth-container .clerk-form input,
    .auth-container .clerk-form button {
        padding: 10px 14px;
        font-size: 16px; /* Better for mobile */
    }
}

/* Additional Clerk Component Styling */
/* Target Clerk's actual component classes */
.auth-container [class*="clerk-"] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Override any Clerk positioning that might interfere with centering */
.auth-container [class*="clerk-"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Ensure Clerk components are centered within their containers */
.auth-container [class*="clerk-formField"],
.auth-container [class*="clerk-formButton"],
.auth-container [class*="clerk-socialButtons"] {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Clerk Form Fields */
.auth-container [class*="clerk-formField"] {
    margin-bottom: 16px;
}

.auth-container [class*="clerk-formFieldInput"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    color: #1f2937;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.auth-container [class*="clerk-formFieldInput"]:focus {
    outline: none;
    border-color: #222;
    box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.1);
}

/* Clerk Buttons */
.auth-container [class*="clerk-formButtonPrimary"] {
    width: 100%;
    padding: 12px 16px;
    background: #222;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.auth-container [class*="clerk-formButtonPrimary"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.auth-container [class*="clerk-formButtonSecondary"] {
    background: transparent;
    color: #222;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}

.auth-container [class*="clerk-formButtonSecondary"]:hover {
    background: #f9fafb;
    border-color: #222;
    transform: none;
}

/* Clerk Form Labels */
.auth-container [class*="clerk-formFieldLabel"] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

/* Clerk Error Messages */
.auth-container [class*="clerk-formFieldError"] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

/* Clerk Form Container */
.auth-container [class*="clerk-form"] {
    width: 100%;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Clerk Social Buttons */
.auth-container [class*="clerk-socialButtons"] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.auth-container [class*="clerk-socialButtonsButton"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-container [class*="clerk-socialButtonsButton"]:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

/* Clerk Divider */
.auth-container [class*="clerk-divider"] {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #6b7280;
    font-size: 12px;
}

.auth-container [class*="clerk-divider"]::before,
.auth-container [class*="clerk-divider"]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.auth-container [class*="clerk-divider"]::before {
    margin-right: 12px;
}

.auth-container [class*="clerk-divider"]::after {
    margin-left: 12px;
}

/* App container */
#app-container {
    display: none;
    width: 100%;
    height: 100vh;
}

/* Profile Popover - shadcn style */
.profile-popover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
}

.profile-popover.active {
    pointer-events: none; /* Keep overlay non-blocking */
}

.profile-popover-content {
    position: absolute;
    top: 80px;
    left: 20px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 240px;
    overflow: hidden;
    animation: profilePopoverIn 0.2s ease-out;
    pointer-events: auto; /* Allow interaction with the popover content */
}

@keyframes profilePopoverIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.profile-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-email {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0;
}

.profile-actions {
    padding: 8px;
}

.profile-usage {
    padding: 12px 16px;
}

.profile-usage-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.profile-usage-label {
    font-size: 12px;
    color: #6b7280;
}

.profile-usage-count {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.profile-usage-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}

.profile-usage-fill {
    height: 100%;
    width: 100%;
    background: #111827;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.profile-usage-note {
    margin-top: 6px;
    font-size: 11px;
    color: #9ca3af;
}

.profile-action {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-align: left;
}

.profile-action:hover {
    background: #f9fafb;
    color: #111827;
}

.profile-action svg {
    flex-shrink: 0;
}

body {
    margin: 0;
    padding: 0;
    background: var(--startup-scene);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#viewer {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #ffffff 0%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
}

/* Add smooth transitions to 3Dmol canvas elements */
#viewer canvas {
    transition: all 150ms ease-out;
}

/* Add smooth transitions to 3Dmol container elements */
#viewer > div {
    transition: all 150ms ease-out;
}

/* Drag and drop styling */
.drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.drag-overlay.active {
    opacity: 1;
    visibility: visible;
    animation: dragOverlaySlideIn 0.2s ease-out;
}

@keyframes dragOverlaySlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Loading Spinner Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.loading-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.loading-spinner-large {
    color: white;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.loading-text {
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.drag-message {
    padding: 80px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.drag-message svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    color: hsl(262.1 83.3% 57.8%);
}

.floating-toolbar {
    background: hsl(0 0% 100%);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 12px; /* with the 1px border: 62px tall, same as the capture buttons */
    display: flex;
    align-items: center;
    gap: 12px;
}

/* File Toolbar - Top Left */
/* Surface Style Tabs */
.surface-style-tabs {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.surface-tab {
    flex: 1;
    padding: 6px 12px;
    background: hsl(0 0% 95%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: hsl(0 0% 45%);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.surface-tab:hover {
    background: hsl(0 0% 95%);
}

.surface-tab.active {
    background: hsl(0 0% 100%);
    border-color: hsl(0 0% 9%);
    color: hsl(0 0% 9%);
    font-weight: 600;
}

/* Bottom Layout Container */
.bottom-layout-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
}

/* Capture Buttons Container */
.capture-buttons-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Standalone Capture Buttons */
.capture-button {
    width: 62px;  /* 12px padding around a 36px icon area, plus the 1px border */
    height: 62px;
    background: hsl(0 0% 100%);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.capture-button:hover {
    background: hsl(0 0% 96%);
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
}

.capture-button svg {
    width: 24px;
    height: 24px;
}

.section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Toolbar sections stay on one row */
.floating-toolbar .section {
    flex-wrap: nowrap;
    min-width: 0;
}

.section-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.record-status {
    font-size: 11px;
    color: hsl(0 0% 45%);
    text-align: center;
    min-height: 0;
    line-height: 1.2;
    font-weight: 500;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.record-status.active {
    color: hsl(0 72% 51%);
    font-weight: 600;
    opacity: 1;
    animation: pulse 1.5s infinite;
}

.record-status.recording {
    color: hsl(0 72% 51%);
    font-weight: 500;
    animation: pulse 1.5s infinite;
}

/* Global Toast Notification */
.toast-container {
    position: fixed;
    top: 72px; /* below the Design / Stylize switch (24px + 36px + 12px) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    pointer-events: none;
}

.toast {
    background: #1b1b1b;
    color: hsl(0 0% 98%);
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    background: #1b1b1b;
    color: hsl(0 0% 98%);
}

.toast.error {
    background: #ef4444;
    color: white;
}

/* Universal Search Modal */
.pdb-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pdb-modal.active {
    display: flex;
    opacity: 1;
}

.pdb-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    width: 440px;
    max-width: 440px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    transition-delay: 0.1s;
}

.pdb-modal.active .pdb-modal-content {
    opacity: 1;
    transform: translateY(0);
}

.pdb-modal-title {
    font-size: 32px;
    font-weight: 600;
    color: hsl(0 0% 100%);
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    transition-delay: 0.2s;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pdb-modal.active .pdb-modal-title {
    opacity: 1;
    transform: translateY(0);
}





/* Universal Search Styles */
.search-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 500px;
    margin-bottom: 16px;
}

/* Universal Search Styles */
.search-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 500px;
    margin-bottom: 16px;
}

.universal-search-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    color: hsl(0 0% 100%);
    font-size: 13px;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.universal-search-input:focus {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.universal-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.universal-search-btn {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    background: hsl(0 0% 100%);
    color: hsl(0 0% 9%);
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none;
    outline: none;
    position: relative;
    gap: 8px;
    box-sizing: border-box;
}

.universal-search-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.universal-search-btn:focus-visible {
    outline: 2px solid hsl(262.1 83.3% 57.8%);
    outline-offset: 2px;
}

.universal-search-btn:disabled {
    pointer-events: none;
    opacity: 0.5;
    transform: none;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.search-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    max-width: 500px;
    margin-bottom: 20px;
}

.search-info small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14pt;
    line-height: 1.4;
    text-align: center;
}

/* Results Modal CSS removed - kept logic in JS for future restoration */



@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Recording button blink animation */
.recording-blink {
    animation: recordingBlink 1s infinite;
}

@keyframes recordingBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Recording quality indicator */
.recording-quality {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #10b981;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.recording-quality.high {
    background: #10b981;
}

.recording-quality.medium {
    background: #f59e0b;
}

.recording-quality.low {
    background: #ef4444;
}

.section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.separator {
    width: 1px;
    height: 24px;
    background: hsl(0 0% 90%);
    margin: 0 4px;
}

.separator-horizontal {
    width: 100%;
    height: 1px;
    background: hsl(0 0% 90%);
    margin: 12px 0;
}

/* shadcn/ui Button Component */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    height: 36px;
    padding: 0 16px;
    position: relative;
    gap: 8px;
}

/* Icon-only button variant */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    min-width: 36px;
}

.btn:focus-visible {
    outline: 2px solid hsl(262.1 83.3% 57.8%);
    outline-offset: 2px;
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.btn-primary {
    background: #1b1b1b;
    color: hsl(0 0% 98%);
}

.btn-primary:hover {
    background: #2a2a2a;
}

.btn-outline {
    background: transparent;
    color: #1b1b1b;
    border: 2px solid #1b1b1b;
}

.btn-outline:hover {
    background: rgba(27, 27, 27, 0.1);
    color: #1b1b1b;
}

.btn-secondary {
    background-color: hsl(0 0% 95%);
    color: hsl(0 0% 9%);
    border: 1px solid hsl(0 0% 90%);
}

.btn-secondary:hover {
    background-color: hsl(0 0% 95%);
}

/* shadcn/ui Select Component */
.select-trigger {
    display: flex;
    height: 36px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    border: 1px solid hsl(0 0% 90%);
    background-color: hsl(0 0% 100%);
    padding: 0 12px;
    font-size: 13px;
    color: hsl(0 0% 9%);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    position: relative;
    user-select: none;
}

.select-trigger:hover {
    background-color: hsl(0 0% 95%);
}

.select-trigger:focus {
    outline: none; /* mouse focus: no ring; keyboard focus gets the shared active style */
}

.select-trigger.active {
    border-color: hsl(222 83.3% 57.8%);
    box-shadow: 0 0 0 2px hsl(222 83.3% 57.8% / 0.2);
}

.select-value {
    flex: 1;
    text-align: left;
}

.select-chevron {
    color: hsl(0 0% 45%);
}

/* Hide default select styling */
.style-select,
.animation-select,
.effect-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
    color: inherit;
}

.style-select {
    min-width: 100px;
}

.animation-select {
    min-width: 100px;
}

.effect-select {
    min-width: 100px;
}

/* Select containers with shadcn/ui styling */
.select-container {
    position: relative;
    display: inline-block;
    width: 140px;
    max-width: 140px;
}

.select-container .select-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    gap: 8px;
}

.select-container .select-trigger .select-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.select-container .select-trigger .select-chevron {
    flex-shrink: 0;
}

/* Dropdown content */
.select-content {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1000;
    background-color: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 4px;
    margin-bottom: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s ease;
    max-height: 200px;
    overflow-y: auto;
    white-space: nowrap;
    min-width: 100%;
    width: max-content;
}

.select-content.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: hsl(0 0% 9%);
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    min-width: 0;
}

.select-item:hover {
    background-color: hsl(0 0% 95%);
}

.select-item.selected {
    background-color: rgba(0, 0, 0, 0.08);
    color: hsl(0 0% 9%);
}

.select-shortcut {
    font-size: 12px;
    color: hsl(0 0% 45%);
    background-color: hsl(0 0% 95%);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

.select-item.selected .select-shortcut {
    background-color: hsl(0 0% 95%);
    color: hsl(0 0% 45%);
}

/* Color pickers: Coloris wraps each [data-coloris] input in .clr-field with a swatch
   button. Hide the hex text so the field reads as a swatch, like the old native input. */
.clr-field {
    display: inline-block;
    vertical-align: middle;
}

.color-picker,
.annotation-color-picker,
.interface-color-picker {
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    background: hsl(0 0% 100%);
    color: transparent;
    caret-color: transparent;
    font-size: 0;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: border-color 0.2s ease;
}

.interface-color-picker {
    border-radius: 4px;
}

.color-picker:hover,
.annotation-color-picker:hover,
.interface-color-picker:hover {
    border-color: hsl(0 0% 45%);
}

/* The swatch fills the field with a small inset, and clicks go through to the input */
.clr-field button {
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    width: auto;
    height: auto;
    transform: none;
    border-radius: 4px;
    pointer-events: none;
}

.clr-field button:after {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Coloris defaults to z-index 1000; keep the picker above the annotation (3000)
   and other modals and their dropdowns (up to 10001) */
#clr-picker {
    z-index: 10002;
}

.clr-field:has(.interface-color-picker) button {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-radius: 2px;
}

/* Molecule loading animation */
.molecule-loading {
    animation: moleculeFadeIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes moleculeFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Canvas animation wrapper */
.canvas-animation-wrapper {
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* shadcn/ui Tooltip Component */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Keyboard shortcut styling */
.keyboard-shortcut {
    opacity: 0.6;
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #1b1b1b;
    color: hsl(0 0% 98%);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
}

.tooltip:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* Tooltip positioning for different elements */
.tooltip-left .tooltip-content {
    left: auto;
    right: 0;
    transform: translateX(4px);
}

.tooltip-left:hover .tooltip-content {
    transform: translateX(0);
}

.tooltip-right .tooltip-content {
    left: auto;
    right: 0;
    transform: translateX(-4px);
}

.tooltip-right:hover .tooltip-content {
    transform: translateX(0);
}

.tooltip-top .tooltip-content {
    bottom: 100%;
    top: auto;
    transform: translateX(-50%) translateY(4px);
}

.tooltip-top:hover .tooltip-content {
    transform: translateX(-50%) translateY(0);
}

.tooltip-bottom .tooltip-content {
    top: 100%;
    bottom: auto;
    margin-top: 8px;
    margin-bottom: 0;
    transform: translateX(-50%) translateY(-4px);
}

.tooltip-bottom:hover .tooltip-content {
    transform: translateX(-50%) translateY(0);
}

/* Material properties panel */
.material-panel {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: hsl(0 0% 100%);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 2000;
    min-width: 200px;
}

.material-panel.active {
    display: flex;
}

/* Image export panel: positioned above the camera button by toggleExportPanel() */
.export-panel {
    transform: translateX(-50%);
    min-width: 240px;
}

.export-download-btn {
    padding: 10px 16px;
    background: hsl(0 0% 9%);
    color: hsl(0 0% 98%);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.export-download-btn:hover {
    background: hsl(222.2 8% 17%);
}

/* Shown while a 360° video renders (see exportTurntableVideo): a clear layer that blocks
   clicks, with a progress card above the toolbar so the turning molecule stays visible */
.render-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 110px;
    background: transparent;
}

.render-overlay.active {
    display: flex;
}

.render-overlay-card {
    width: 280px;
    padding: 20px;
    border-radius: 12px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.render-overlay-title {
    font-size: 13px;
    font-weight: 600;
    color: hsl(0 0% 9%);
}

.render-overlay-status {
    font-size: 12px;
    color: hsl(0 0% 45%);
}

.render-overlay-cancel {
    align-self: flex-end;
    padding: 6px 12px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    background: hsl(0 0% 100%);
    font-size: 13px;
    cursor: pointer;
}

.material-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.material-label {
    font-size: 12px;
    font-weight: 500;
    color: #1b1b1b;
    min-width: 60px;
    text-align: left;
}

.material-value {
    font-size: 12px;
    font-weight: 500;
    color: #1b1b1b;
    min-width: 30px;
    text-align: right;
}

.material-slider {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #1b1b1b var(--fill, 0%), rgb(0 0 0 / 0.08) var(--fill, 0%));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.material-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 14px;
    border-radius: 999px;
    background: #1b1b1b;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.material-slider::-moz-range-thumb {
    width: 22px;
    height: 14px;
    border-radius: 999px;
    background: #1b1b1b;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Empty State Overlay */
.empty-state-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.empty-state-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.empty-state-content {
    text-align: center;
    padding: 40px;
    max-width: 400px;
    width: 90%;
}

.empty-state-image {
    margin-bottom: 24px;
}

.empty-state-image svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

/* Light theme text colors */
.empty-state-title {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    margin-bottom: 8px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.empty-state-title.dark-theme {
    color: #fff;
}

.load-example-link {
    color: #444;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.load-example-link.dark-theme {
    color: #fff;
}

.load-example-link:hover {
    color: #666;
}

.load-example-link.dark-theme:hover {
    color: #ccc;
}

.empty-state-subtitle {
    font-size: 13px;
    color: #444;
    opacity: 0.7;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.empty-state-subtitle.dark-theme {
    color: #fff;
    opacity: 0.8;
}

/* Privacy Consent Modal */
.privacy-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.privacy-modal-content {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.privacy-modal-header {
    padding: 24px 24px 0 24px;
}

.privacy-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.4;
}

.privacy-modal-body {
    padding: 16px 24px 24px 24px;
}

.privacy-modal-body p {
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0;
}

.privacy-modal-footer {
    padding: 0 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.privacy-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.privacy-btn-primary {
    background: #222;
    color: white;
}

.privacy-btn-primary:hover {
    background: #333;
}

.privacy-btn-primary:active {
    background: #111;
}

.privacy-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.privacy-btn-secondary:hover {
    background: #e5e7eb;
}

.privacy-btn-secondary:active {
    background: #d1d5db;
}

/* Dark theme support */
.dark-theme .privacy-modal-content {
    background: #1f2937;
    border: 1px solid #374151;
}

.dark-theme .privacy-modal-title {
    color: #f9fafb;
}

.dark-theme .privacy-modal-body p {
    color: #d1d5db;
}

.dark-theme .privacy-btn-secondary {
    background: #374151;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

.dark-theme .privacy-btn-secondary:hover {
    background: #4b5563;
}

.dark-theme .privacy-btn-secondary:active {
    background: #6b7280;
}

/* Annotation Panel - Right Side Panel */
.annotation-modal {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 340px;
    height: calc(100vh - 40px);
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    display: flex;
    flex-direction: column;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: all 0.15s ease-out;
}

.annotation-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.annotation-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.annotation-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid hsl(0 0% 90%);
}

.annotation-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: hsl(0 0% 9%);
    margin: 0;
}

.annotation-modal-close {
    background: none;
    border: none;
    color: hsl(0 0% 45%);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.annotation-modal-close:hover {
    background: hsl(0 0% 90%);
    color: hsl(0 0% 9%);
}

.annotation-modal-body {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.annotation-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid hsl(0 0% 90%);
}

/* Annotation Item - Wireframe Style */
.annotation-item {
    border: 1px solid hsl(0 0% 90%);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 12px;
    background: hsl(0 0% 100%);
    overflow: visible;
    position: relative;
}

.annotation-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid hsl(0 0% 90%);
}


.annotation-item-name {
    font-size: 14px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    flex: 1;
}

.annotation-item-name.editable {
    background: none;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px; /* same as the interface names */
    font-weight: inherit;
    color: inherit;
    padding: 0;
    width: 100%;
    transition: all 0.2s ease;
}

.annotation-item-name.editable:focus {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
}

.annotation-toggle {
    width: 36px;
    height: 18px;
    background: hsl(0 0% 9%);
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.annotation-toggle.off {
    background: hsl(0 0% 90%);
}

.annotation-toggle::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    top: 2px;
    transition: all 0.2s ease;
    left: 2px;
}

.annotation-toggle:not(.off)::after {
    left: 20px;
}

.annotation-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: hsl(0 0% 100%);
    color: hsl(0 0% 9%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
}

.annotation-delete-btn:hover {
    background: hsl(0 0% 95%);
    transform: scale(1.1);
}

.annotation-delete-btn:active {
    transform: scale(0.95);
}

.annotation-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}


.annotation-style-select {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    background-color: hsl(0 0% 100%);
    font-size: 13px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.annotation-style-select:hover {
    background-color: hsl(0 0% 95%);
}

.annotation-style-select:focus {
    outline: none; /* mouse focus: no ring; keyboard focus gets the shared active style */
}

/* Range Input Controls */
.range-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 20px 4px 20px;
}

.annotation-chain-select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 4px;
    background-color: hsl(0 0% 100%);
    font-size: 12px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    min-width: 60px;
}

.annotation-chain-select:hover {
    background-color: hsl(0 0% 95%);
}

.annotation-chain-select:focus {
    outline: none; /* mouse focus: no ring; keyboard focus gets the shared active style */
}

.range-input {
    width: 60px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    background-color: hsl(0 0% 100%);
    font-size: 13px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    text-align: center;
    outline: none;
    transition: all 0.2s ease;
}

.range-input:hover {
    background-color: hsl(0 0% 95%);
}

.range-input:focus {
    outline: 2px solid #222222;
    outline-offset: 2px;
    border-color: #222222;
}

.range-separator {
    font-size: 12px;
    color: hsl(0 0% 45%);
    font-weight: 500;
}


/* Empty State */
.annotation-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 20px;
}

.annotation-empty-title {
    font-size: 14px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    margin: 0;
}

/* Add Button */
.annotation-add-section {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.annotation-add-btn {
    padding: 8px 16px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.annotation-add-btn:hover {
    background: hsl(0 0% 95%);
    border-color: hsl(214.3 31.8% 85%);
}

/* Empty State */
.annotation-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: hsl(0 0% 45%);
    font-size: 13px;
    border: 2px dashed hsl(0 0% 90%);
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Annotation Select Components (matching main toolbar) */
.annotation-select-container {
    position: relative;
    display: inline-block;
    width: 140px;
    max-width: 140px;
}

.annotation-select-container .annotation-select-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    background-color: hsl(0 0% 100%);
    font-size: 13px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    overflow: hidden;
    gap: 8px;
}

.annotation-select-container .annotation-select-trigger:hover {
    background-color: hsl(0 0% 95%);
}

.annotation-select-container .annotation-select-trigger:focus {
    outline: none; /* mouse focus: no ring; keyboard focus gets the shared active style */
}

.annotation-select-container .annotation-select-trigger .annotation-select-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    width: 100%;
}

.annotation-select-container .annotation-select-trigger .annotation-select-chevron {
    flex-shrink: 0;
    color: hsl(0 0% 45%);
    transition: transform 0.2s ease;
}

.annotation-select-container.active .annotation-select-chevron {
    transform: rotate(180deg);
}

/* Annotation Select Content */
.annotation-select-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 4px;
    margin-top: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    min-width: 140px;
}

.annotation-select-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.annotation-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: hsl(0 0% 9%);
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    min-width: 0;
}

.annotation-select-item:hover {
    background-color: hsl(0 0% 95%);
}

.annotation-select-item.selected {
    background-color: rgba(0, 0, 0, 0.08);
    color: hsl(0 0% 9%);
}

/* Annotation Material Controls (matching main toolbar) */
.annotation-material-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
    border-top: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s ease, padding 0.15s ease;
}

.annotation-material-controls.expanded {
    max-height: 500px;
    padding: 16px 20px;
    border-top: 1px solid hsl(0 0% 90%);
}

.annotation-material-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    cursor: pointer;
    color: hsl(0 0% 45%);
    transition: all 0.2s ease;
    border-radius: 6px;
    flex-shrink: 0;
}

.annotation-material-toggle:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 9%);
}

.annotation-material-toggle:focus {
    outline: none; /* mouse focus: no ring; keyboard focus gets the shared active style */
}

.annotation-material-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

.annotation-material-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.annotation-material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.annotation-material-label {
    font-size: 12px;
    font-weight: 500;
    color: #1b1b1b;
    min-width: 60px;
    text-align: left;
}

.annotation-material-value {
    font-size: 12px;
    font-weight: 500;
    color: #1b1b1b;
    min-width: 30px;
    text-align: right;
}

.annotation-material-slider {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #1b1b1b var(--fill, 0%), rgb(0 0 0 / 0.08) var(--fill, 0%));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.annotation-material-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 14px;
    border-radius: 999px;
    background: #1b1b1b;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.annotation-material-slider::-moz-range-thumb {
    width: 22px;
    height: 14px;
    border-radius: 999px;
    background: #1b1b1b;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Annotation Surface Style Tabs */
.annotation-surface-style {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.annotation-surface-tabs {
    display: flex;
    gap: 4px;
}

.annotation-surface-tab {
    flex: 1;
    padding: 6px 12px;
    background: hsl(0 0% 95%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: hsl(0 0% 45%);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.annotation-surface-tab:hover {
    background: hsl(0 0% 95%);
}

.annotation-surface-tab.active {
    background: hsl(0 0% 100%);
    border-color: hsl(0 0% 9%);
    color: hsl(0 0% 9%);
    font-weight: 600;
}

/* Interface Analysis Section */
.annotation-interface-section {
    margin-bottom: 24px;
}

.annotation-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.annotation-section-title {
    font-size: 14px;
    font-weight: 600;
    color: hsl(0 0% 9%);
    margin: 0;
}

.interface-distance-controls {
    display: flex;
    align-items: center;
}

.interface-distance-select-container {
    position: relative;
    min-width: 80px;
}

.interface-distance-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    background-color: hsl(0 0% 100%);
    font-size: 13px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.interface-distance-select-trigger:hover {
    background-color: hsl(0 0% 95%);
}

.interface-distance-select-trigger:focus {
    outline: none; /* mouse focus: no ring; keyboard focus gets the shared active style */
}

.interface-distance-select-trigger.active {
    background-color: hsl(0 0% 95%);
    border-color: hsl(0 0% 90%);
}

.interface-distance-select-value {
    flex: 1;
    text-align: left;
}

.interface-distance-select-chevron {
    color: hsl(0 0% 45%);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.interface-distance-select-container.active .interface-distance-select-chevron {
    transform: rotate(180deg);
}

.interface-distance-select-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 4px;
    margin-top: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    max-height: 200px;
    overflow-y: auto;
}

.interface-distance-select-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.interface-distance-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: hsl(0 0% 9%);
    transition: all 0.2s ease;
}

.interface-distance-select-item:hover {
    background-color: hsl(0 0% 95%);
}

.interface-distance-select-item.selected {
    background-color: hsl(0 0% 95%);
    color: hsl(0 0% 9%);
}

.annotation-interface-results {
    display: flex;
    flex-direction: column;
}

/* Interface Analysis Items - Use same styling as annotation items */
.interface-analysis-item {
    border: 1px solid hsl(0 0% 90%);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 12px;
    background: hsl(0 0% 100%);
    overflow: visible;
    position: relative;
}

/* Ensure dropdowns in interface items have higher z-index */
.interface-analysis-item .annotation-select-content {
    z-index: 10001;
}

/* Ensure interface analysis items don't clip their children */
.interface-analysis-item,
.interface-item-controls,
.annotation-interface-results {
    overflow: visible !important;
}

/* Allow dropdowns to extend beyond modal body */
.annotation-modal-body {
    overflow-y: auto;
    overflow-x: visible;
}

.interface-analysis-item.active {
    border-color: hsl(0 0% 9%);
}

.interface-analysis-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.interface-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
}

.interface-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.interface-item-name {
    font-size: 14px;
    font-weight: 400;
    color: hsl(0 0% 9%);
    flex-shrink: 0;
}

.interface-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 8px;
    background-color: hsl(0 0% 95%);
    color: hsl(0 0% 9%);
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid hsl(0 0% 90%);
}


.interface-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-top: 1px solid hsl(0 0% 90%);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s ease, padding 0.15s ease, opacity 0.15s ease;
    opacity: 0;
}

.interface-item-controls.expanded {
    max-height: 100px;
    padding: 16px 20px;
    opacity: 1;
}


/* Loading state */
.annotation-interface-section.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.annotation-interface-section.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid hsl(0 0% 90%);
    border-top: 2px solid hsl(0 0% 9%);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .annotation-modal {
        width: calc(100vw - 40px);
        right: 20px;
        left: 20px;
    }
    
    .annotation-modal-header,
    .annotation-modal-body,
    .annotation-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .annotation-item-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .annotation-select-container {
        min-width: 120px;
    }
    
    .annotation-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .interface-distance-controls {
        align-self: flex-end;
    }
}




/* ---------------------------------------------------------------------------
   Edit / Enhance modes (see setAppMode)
   --------------------------------------------------------------------------- */
.mode-switch {
    display: flex;
    gap: 2px;
    height: 36px;
    box-sizing: border-box;
    padding: 3px;
    background: hsl(0 0% 95%);
    border-radius: 8px;
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
}

.mode-tab {
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: hsl(0 0% 45%);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mode-tab:hover {
    color: hsl(0 0% 9%);
}

.mode-tab.active {
    background: hsl(0 0% 100%);
    color: hsl(0 0% 9%);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* Mode transitions: layers fade and drift a few pixels. Hidden layers keep their layout but
   turn invisible once the fade is done, so they can't be clicked */
.enhance-stage,
.enhance-history,
.enhance-bar,
.enhance-actions,
.enhance-generating,
.enhance-compare {
    transition: opacity 0.28s ease, transform 0.28s ease, background-color 0.35s ease, visibility 0s linear 0.28s;
}

/* Stylize hides the design UI; it slides back up on return */
.bottom-layout-container {
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s;
}

body.enhance-mode .bottom-layout-container {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}

body.enhance-mode .material-panel {
    display: none !important;
}

.enhance-stage {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.015);
}

body.enhance-mode .enhance-stage,
body.enhance-mode .enhance-history.has-results,
body.enhance-mode .enhance-bar.visible,
body.enhance-mode .enhance-actions.visible,
.enhance-generating.active,
.enhance-compare.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, transform 0.28s ease, background-color 0.35s ease, visibility 0s;
}

body.enhance-mode .enhance-stage {
    transform: none;
}

/* Stacked images; the shown one fades over the other */
.enhance-stage-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.enhance-stage-img.visible {
    opacity: 1;
}

.enhance-generating {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: enhancePulse 1.6s ease-in-out infinite;
}

@keyframes enhancePulse {
    0%, 100% { background: rgba(255, 255, 255, 0.1); }
    50% { background: rgba(255, 255, 255, 0.3); }
}

.enhance-history {
    position: fixed;
    top: 20px;
    right: 20px;
    align-items: flex-end;
    z-index: 1100;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: visible;
    padding: 4px;
}

body.enhance-mode .enhance-history.has-results {
    transform: none;
}

.enhance-history-item {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background: hsl(0 0% 100%);
    cursor: pointer;
    opacity: 0.7;
    box-shadow: 0 0 0 1px hsl(0 0% 90%);
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.enhance-history-item:hover {
    opacity: 1;
}

/* Selected (shown, and the input for the next run): white ring inside a dark ring, so it
   reads on light and dark scenes */
.enhance-history-item.active {
    opacity: 1;
    box-shadow: 0 0 0 2px hsl(0 0% 100%), 0 0 0 4px hsl(0 0% 9%);
}

.enhance-history-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.enhance-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    flex-direction: column;
    gap: 12px;
    width: min(var(--design-toolbar-width, 720px), calc(100vw - 32px));
    box-sizing: border-box;
    padding: 12px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

body.enhance-mode .enhance-bar.visible,
body.enhance-mode .enhance-actions.visible {
    transform: translateX(-50%);
}

/* Actions for the selected result, in place of the prompt bar */
.enhance-actions {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
}

.enhance-icon-btn {
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enhance-actions .tooltip,
.enhance-add-tooltip {
    flex: 0 0 auto;
    display: flex;
}

/* No tooltip while the styles popover is open, or on Generate while it's running or off */
.enhance-add-btn.active + .tooltip-content,
.enhance-run-btn.running + .tooltip-content,
.enhance-run-btn:disabled + .tooltip-content {
    display: none;
}

/* Keep the page from being text-selected while dragging in the color picker */
body.color-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.enhance-download-btn {
    height: 40px;
    padding: 0 18px;
}

.enhance-icon-btn.active {
    background: hsl(0 0% 95%);
}

.enhance-icon-btn.active + .tooltip-content {
    display: none;
}

/* Style and prompt of the shown result, above the action bar */
.enhance-info {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 300px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 12px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.enhance-info.active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.enhance-info-label {
    font-size: 11px;
    font-weight: 500;
    color: hsl(0 0% 45%);
}

.enhance-info-label:not(:first-child) {
    margin-top: 6px;
}

.enhance-info .enhance-chip {
    box-shadow: none;
}

.enhance-info-prompt {
    max-height: 160px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.45;
    color: hsl(0 0% 9%);
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

.enhance-info-empty {
    font-size: 13px;
    color: hsl(0 0% 45%);
}

.enhance-info-prompt-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.enhance-info-prompt-row .enhance-info-prompt {
    flex: 1;
    min-width: 0;
}

.enhance-info-copy {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -4px -4px 0 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: hsl(0 0% 45%);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.enhance-info-copy:hover {
    background: hsl(0 0% 95%);
    color: hsl(0 0% 9%);
}

.enhance-action-btn,
.enhance-cancel-btn {
    height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: hsl(0 0% 9%);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.enhance-action-btn:hover,
.enhance-cancel-btn:hover {
    background: hsl(0 0% 95%);
}

.enhance-cancel-btn {
    color: hsl(0 0% 45%);
}

/* Before / after modal over a blurred backdrop: white top bar (toggle centered, close
   right), image below */
.enhance-compare {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    background: rgb(15 23 42 / 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
}

.enhance-compare-dialog {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    height: min(820px, 100%);
    border-radius: 12px;
    overflow: hidden;
    background: hsl(0 0% 100%);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
    transform: scale(0.97) translateY(8px);
    transition: transform 0.28s ease;
}

.enhance-compare.active .enhance-compare-dialog {
    transform: none;
}

.enhance-compare-bar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid hsl(0 0% 90%);
}

.enhance-compare-toggle {
    position: static;
    transform: none;
}

.enhance-compare-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: hsl(0 0% 9%);
    cursor: pointer;
}

.enhance-compare-close:hover {
    background: hsl(0 0% 95%);
}

.enhance-compare-frame {
    position: relative;
    flex: 1 1 auto;
    transition: background-color 0.3s ease;
}

.enhance-compare-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Both fade, so a narrower image never shows the other one around it */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.enhance-compare-img.visible {
    opacity: 1;
}


.enhance-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.enhance-add-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 8px;
    background: hsl(0 0% 100%);
    color: hsl(0 0% 9%);
    cursor: pointer;
}

.enhance-add-btn:hover,
.enhance-add-btn.active {
    background: hsl(0 0% 95%);
}

/* The chosen style floats just above the bar, so the bar keeps its height */
.enhance-chips {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    display: flex;
}

.enhance-chips:empty {
    display: none;
}

.enhance-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 4px 0 8px;
    border-radius: 8px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    font-size: 12px;
    font-weight: 500;
    color: hsl(0 0% 9%);
}

.enhance-chip-remove {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 15px;
    line-height: 1;
    color: hsl(0 0% 45%);
    cursor: pointer;
}

.enhance-chip-remove:hover {
    background: hsl(214.3 31.8% 88%);
    color: hsl(0 0% 9%);
}

.enhance-style-swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Styles popover, opened from the + button */
.enhance-style-popover {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 6px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    /* Opens like the style menu: fades in and rises 4px */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s ease;
}

/* Above the chip when there is one */
.enhance-bar.has-chip .enhance-style-popover {
    bottom: calc(100% + 48px);
}

.enhance-style-popover.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.enhance-style-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    color: hsl(0 0% 9%);
    text-align: left;
    cursor: pointer;
}

.enhance-style-option:hover,
.enhance-style-option.active {
    background: hsl(0 0% 95%);
}

.enhance-style-option .enhance-style-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.enhance-prompt {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.enhance-prompt:focus {
    border-color: hsl(0 0% 9%);
}

.enhance-run-btn {
    display: inline-grid;
    align-items: center;
    justify-items: center;
    height: 40px;
    padding: 0 20px;
    font-weight: 500;
}

/* Generate sizes to its label. While running, Generating and Cancel share one cell, so
   hovering doesn't change the width */
.enhance-run-btn > span {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.enhance-run-btn .run-busy,
.enhance-run-btn .run-cancel,
.enhance-run-btn.running .run-idle {
    display: none;
}

.enhance-run-btn.running .run-busy,
.enhance-run-btn.running .run-cancel {
    display: inline-flex;
}

.enhance-run-btn .run-busy,
.enhance-run-btn .run-cancel,
.enhance-run-btn.running .run-idle,
.enhance-run-btn.running:hover .run-busy {
    visibility: hidden;
}

.enhance-run-btn.running .run-busy,
.enhance-run-btn.running:hover .run-cancel {
    visibility: visible;
}

/* Right after clicking Generate the pointer is still on it: keep showing the spinner */
.enhance-run-btn.running.just-started:hover .run-busy {
    visibility: visible;
}

.enhance-run-btn.running.just-started:hover .run-cancel {
    visibility: hidden;
}

/* Prompt and style are locked while generating */
.enhance-bar.locked .enhance-prompt,
.enhance-bar.locked .enhance-add-btn,
.enhance-bar.locked .enhance-chip {
    opacity: 0.55;
    pointer-events: none;
}

.enhance-run-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Controls drawn straight on the scene (sidebar, mode switch) use a faint tint of it:
   darker on light scenes, lighter on dark ones (body.dark-scene, set in updateBackground) */
body {
    --scene-tint: rgb(0 0 0 / 0.05);
    --scene-tint-hover: rgb(0 0 0 / 0.09);
    --scene-contrast: hsl(0 0% 9%);
    --scene-muted: hsl(215.4 16.3% 40%);
}

body.dark-scene {
    --scene-tint: rgb(255 255 255 / 0.14);
    --scene-tint-hover: rgb(255 255 255 / 0.2);
    --scene-contrast: rgb(255 255 255 / 0.92);
    --scene-muted: rgb(255 255 255 / 0.7);
}

#modeSwitch {
    background: var(--scene-tint);
    transition: background 0.2s ease;
}

#modeSwitch .mode-tab:not(.active) {
    color: var(--scene-muted);
}

#modeSwitch .mode-tab:not(.active):hover {
    color: var(--scene-contrast);
}

/* ---------------------------------------------------------------------------
   Left sidebar: + (Import / Upload), structure history, profile at the bottom.
   Floating, no background; everything 44px wide on one column
   --------------------------------------------------------------------------- */
.structure-sidebar {
    position: fixed;
    top: 20px; /* centers the 44px + on the mode switch */
    left: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform 0.28s ease, visibility 0s;
}

body.enhance-mode .structure-sidebar {
    visibility: hidden;
    transform: translateX(-8px);
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

/* The fade is on the buttons and thumbnails themselves: an ancestor with opacity below 1
   cuts blurred controls off from the scene behind them, so they'd flash mid-fade */
.structure-sidebar .sidebar-btn {
    transition: background 0.15s ease, color 0.15s ease, opacity 0.28s ease;
}

.structure-sidebar .structure-item {
    transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.28s ease;
}

body.enhance-mode .structure-sidebar .sidebar-btn,
body.enhance-mode .structure-sidebar .structure-item {
    opacity: 0;
}

.profile-corner {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1000;
}

.sidebar-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: var(--scene-tint);
    color: var(--scene-contrast);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-btn:hover,
.sidebar-btn.active {
    background: var(--scene-tint-hover);
}

.structure-add {
    position: relative;
}

.structure-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Import / Upload, opened from the + */
.structure-menu {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    padding: 6px;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.structure-menu.active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.structure-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: hsl(0 0% 9%);
    text-align: left;
    cursor: pointer;
}

.structure-menu-item:hover {
    background: hsl(0 0% 95%);
}

.structure-menu-hint {
    margin-left: auto;
    padding: 0 5px;
    border: 1px solid hsl(0 0% 90%);
    border-radius: 4px;
    font-size: 11px;
    color: hsl(0 0% 45%);
}

/* Muted note at the end of a menu item, e.g. "Sign in" on Predict for guests */
.structure-menu-note {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}

.guest-only {
    display: none;
}

body.guest .guest-only {
    display: inline;
}

/* Structures opened so far, newest on top; scrolls if it would reach the profile. The
   padding leaves room for the remove buttons that sit outside each thumbnail */
.structure-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 10px; /* the scroll box clips; room for the remove button and its shadow */
    margin: -10px;
    scrollbar-width: none;
}

.structure-history::-webkit-scrollbar {
    display: none;
}

.structure-history:empty {
    display: none;
}

/* Transparent thumbnails on the scene tint */
.structure-item {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--scene-tint);
    cursor: pointer;
    outline: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.structure-item:hover,
.structure-item:focus-visible {
    background: var(--scene-tint-hover);
}

/* Open structure: 1.5px border in the scene's contrast color */
.structure-item.active {
    box-shadow: inset 0 0 0 1.5px var(--scene-contrast);
}

.structure-item img,
.structure-item-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.structure-item img {
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}

.structure-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: hsl(0 0% 100%);
    color: hsl(0 0% 9%);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.08);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.structure-item:hover .structure-remove,
.structure-item:focus-within .structure-remove {
    opacity: 1;
    transform: none;
}

.structure-remove:hover {
    background: hsl(0 0% 95%);
}

/* Label to the right of the hovered sidebar item */
.sidebar-tip {
    position: fixed;
    z-index: 5000;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #1b1b1b;
    color: hsl(0 0% 98%);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sidebar-tip.visible {
    opacity: 1;
    transform: translate(0, -50%);
}

/* On narrow screens the centered toolbars would run into the profile button; center them in
   the space right of the sidebar instead */
@media (max-width: 960px) {
    .bottom-layout-container,
    .enhance-bar,
    .enhance-actions {
        left: calc(50% + 34px);
    }

    .enhance-bar {
        width: min(720px, calc(100vw - 100px));
    }
}

/* Controls inside the white toolbar take its background; a light grey shows on hover */
.floating-toolbar .btn-secondary,
.floating-toolbar .select-trigger {
    background-color: transparent;
}

.floating-toolbar .btn-secondary:hover,
.floating-toolbar .select-trigger:hover {
    background-color: hsl(0 0% 95%);
}

/* ---------------------------------------------------------------------------
   Shared input states. Hover: light grey fill (buttons, selects) or a darker
   border (text fields). Active (pressed toggle, open menu or panel, focused field):
   a 1.5px dark border, drawn as the 1px border plus a 0.5px inner shadow so
   nothing shifts.
   --------------------------------------------------------------------------- */
:root {
    --control-border: hsl(0 0% 90%);
    --control-hover: hsl(0 0% 95%);
    --control-hover-border: hsl(215 16% 80%);
    --control-active: hsl(0 0% 9%);
}

.btn-secondary:hover,
.btn-outline:hover,
.annotation-add-btn:hover,
.annotation-material-toggle:hover,
.surface-tab:not(.active):hover,
.annotation-surface-tab:not(.active):hover,
.select-trigger:hover,
.capture-button:hover,
.enhance-add-btn:hover,
.annotation-style-select:hover,
.annotation-chain-select:hover,
.annotation-select-container .annotation-select-trigger:hover,
.interface-distance-select-trigger:hover {
    background-color: var(--control-hover);
}

.capture-button:hover {
    background: var(--control-hover);
}

.color-picker:hover,
.annotation-color-picker:hover,
.interface-color-picker:hover,
.range-input:hover,
.enhance-prompt:hover {
    border-color: var(--control-hover-border);
}

.btn-outline,
.select-trigger.active,
.select-trigger:focus-visible,
.annotation-select-container .annotation-select-trigger:focus-visible,
.interface-distance-select-trigger:focus-visible,
.annotation-material-toggle:focus-visible,
.annotation-material-toggle.expanded,
.surface-tab.active,
.annotation-surface-tab.active,
.capture-button.active,
.enhance-add-btn.active,
.annotation-select-container.active .annotation-select-trigger,
.interface-distance-select-trigger.active,
.color-picker.is-open,
.annotation-color-picker.is-open,
.interface-color-picker.is-open,
.range-input:focus,
.enhance-prompt:focus,
.annotation-style-select:focus-visible,
.annotation-chain-select:focus-visible {
    border: 1px solid var(--control-active);
    box-shadow: inset 0 0 0 0.5px var(--control-active);
    outline: none;
}

.btn-outline {
    color: var(--control-active);
}

/* The capture buttons keep their drop shadow when active */
.capture-button.active {
    box-shadow: inset 0 0 0 0.5px var(--control-active), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Buttons and tabs on white panels sit on white, like the toolbar controls */
.btn-secondary,
.annotation-add-btn,
.surface-tab,
.annotation-surface-tab {
    background-color: hsl(0 0% 100%);
}

.annotation-add-btn {
    box-shadow: none;
}

.annotation-material-toggle.expanded {
    color: var(--control-active);
}

/* ---------------------------------------------------------------------------
   Compact annotation panel: tighter padding and gaps, 32px controls
   --------------------------------------------------------------------------- */
.annotation-modal-header {
    padding: 12px 16px;
}

.annotation-modal-body {
    padding: 12px 16px;
    gap: 8px;
}

.annotation-modal-footer {
    padding: 12px 16px;
    gap: 8px;
}

.annotation-item,
.interface-analysis-item {
    margin-bottom: 8px;
}

.annotation-item-header,
.interface-item-header {
    padding: 10px 12px;
}

.annotation-item-controls {
    padding: 10px 12px;
    gap: 8px;
}

.annotation-style-select,
.range-input,
.annotation-select-container .annotation-select-trigger,
.interface-distance-select-trigger {
    height: 32px;
    padding: 0 10px;
}

.annotation-material-toggle,
.annotation-modal .annotation-color-picker,
.annotation-modal .interface-color-picker {
    width: 32px;
    height: 32px;
}

.annotation-material-toggle svg {
    width: 18px;
    height: 18px;
}

.annotation-material-controls {
    padding: 0 12px;
    gap: 8px;
}

.annotation-material-controls.expanded {
    padding: 10px 12px;
}

.range-input-container {
    margin-top: 8px;
    padding: 0 12px 4px;
}

.annotation-select-item,
.interface-distance-select-item {
    padding: 6px 10px;
}

.annotation-add-btn {
    padding: 6px 12px;
}

.annotation-empty-state {
    padding: 24px 16px;
    margin-bottom: 12px;
}

.annotation-interface-section {
    margin-bottom: 16px;
}

.annotation-section-header {
    margin-bottom: 10px;
}

/* A new result develops like a Polaroid */
.enhance-stage-img.developing {
    animation: clayDevelop 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes clayDevelop {
    from { filter: blur(10px) saturate(0.2) brightness(1.15); }
    to { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .enhance-stage-img.developing {
        animation: none;
    }
}

/* Main toolbars let a little of the scene through */
.floating-toolbar,
.capture-button,
.enhance-bar,
.enhance-actions {
    background: hsl(0 0% 100% / 0.95);
}

/* Cancel on the running Generate button: secondary destructive */
.enhance-run-btn.running:not(.just-started):hover {
    background: hsl(222.2 84% 4.9% / 0.08);
    color: hsl(0 72% 48%);
}

/* Scene-tinted controls blur what's behind them. Their own layer keeps the blur steady
   while the stage fades in and out underneath */
#modeSwitch,
.sidebar-btn,
.structure-item {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    will-change: transform;
}

/* A hairline edge for more contrast against the scene: black at 8% on light scenes, white
   at 8% on dark ones. An outline, so it doesn't fight the shadows and active rings */
#modeSwitch,
.sidebar-btn,
.structure-item {
    outline: 0.5px solid rgb(0 0 0 / 0.08);
    outline-offset: -0.5px;
}

body.dark-scene #modeSwitch,
body.dark-scene .sidebar-btn,
body.dark-scene .structure-item {
    outline-color: rgb(255 255 255 / 0.08);
}

/* ===========================================================================
   Floating layout: every control is its own pill or round button, no shared
   toolbar box. Edit: style pill (structure color inside), material, annotations,
   camera and video along the bottom; Play top right; scene color bottom right.
   Render: one pill bar holding +, the prompt and Generate, which collapses into
   the result actions and opens back out for Edit and Retry.
   =========================================================================== */
.bottom-layout-container,
.floating-toolbar,
.floating-toolbar .section,
.capture-buttons-container {
    gap: 8px;
}

.floating-toolbar {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.floating-toolbar .separator {
    display: none;
}

/* The shared pill look: no border, a soft shadow */
:root {
    --pill-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 10px rgb(0 0 0 / 0.04);
}

.style-pill .select-trigger,
.floating-toolbar .btn-icon,
.capture-button,
.enhance-bar,
.enhance-actions .enhance-download-btn {
    background-color: hsl(0 0% 100% / 0.95);
    border: 1px solid transparent;
    box-shadow: var(--pill-shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.floating-toolbar .btn-icon,
.capture-button {
    width: 56px;
    min-width: 56px;
    height: 44px;
    border-radius: 999px;
    box-sizing: border-box;
}

.capture-button:hover {
    transform: none;
}


.capture-button svg {
    width: 20px;
    height: 20px;
}

/* Style pill: structure color dot, style name, chevron */
.style-pill {
    width: 210px;
    max-width: none;
}

.style-pill .select-trigger {
    height: 44px;
    padding: 0 14px 0 0;
    border-radius: 999px;
    box-sizing: border-box;
    gap: 10px;
    overflow: visible; /* the color dot's tooltip sits above the pill */
}

/* Color dots (structure color in the style pill, scene color in the corner): a 22px swatch
   centered in an invisible 44px hit area */
.style-color {
    display: flex;
    flex: 0 0 auto;
    margin-right: -11px;
}

.style-color .clr-field,
.style-color .color-picker,
.scene-color-corner .clr-field,
.scene-color-corner .color-picker {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.style-color .color-picker,
.style-color .color-picker:hover,
.style-color .color-picker.is-open,
.scene-color-corner .color-picker,
.scene-color-corner .color-picker:hover,
.scene-color-corner .color-picker.is-open {
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    cursor: pointer;
}

.style-color .clr-field button,
.scene-color-corner .clr-field button {
    inset: 11px;
    width: auto;
    height: auto;
    transform: none;
    border-radius: 50%;
}

.style-color .clr-field button:after,
.scene-color-corner .clr-field button:after {
    border-radius: 50%;
}

/* No tooltip while the picker is open */
.style-color:has(.is-open) .tooltip-content,
.scene-color-corner:has(.is-open) .tooltip-content {
    opacity: 0;
    visibility: hidden;
}

.style-pill .select-content {
    margin-bottom: 8px;
    border-radius: 12px;
}

/* Scene color: bottom right corner, level with the profile button. Drawn as two layers,
a 1.5px ring in the scene's contrast color under the swatch, since the swatch matches the
scene behind it */
.scene-color-corner {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
}

.scene-color-corner .clr-field button {
    background: var(--scene-contrast);
}

.scene-color-corner .clr-field button:after {
    top: 1.5px;
    right: 1.5px;
    bottom: 1.5px;
    left: 1.5px;
    width: auto;
    height: auto;
    box-shadow: none;
}

/* Play: a bare icon top right, level with the mode switch */
.spin-corner {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 1000;
    display: flex;
}

/* Corner tooltips open to the left */
.spin-corner .tooltip-content,
.scene-color-corner .tooltip-content {
    top: 50%;
    bottom: auto;
    left: auto;
    right: 100%;
    margin: 0 8px 0 0;
    transform: translate(4px, -50%);
}

.spin-corner:hover .tooltip-content,
.scene-color-corner:hover .tooltip-content {
    transform: translate(0, -50%);
}

.corner-icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--scene-contrast);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.corner-icon-btn:hover {
    opacity: 0.7;
}

/* Edit-only corners step aside in Render */
.scene-color-corner,
.spin-corner {
    transition: opacity 0.28s ease, visibility 0s;
}

body.enhance-mode .scene-color-corner,
body.enhance-mode .spin-corner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

/* Round profile button */
.profile-corner .sidebar-btn {
    border-radius: 50%;
}

/* Mode switch: a pill, level with the + and Play */
/* Both tabs take the width of the wider one */
.mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    top: 20px;
    height: 44px;
    padding: 4px;
    border-radius: 999px;
}

.mode-tab {
    padding: 0 18px;
    border-radius: 999px;
}

/* Render: one pill bar with +, the prompt and Generate */
.enhance-bar {
    --bar-width: min(var(--design-toolbar-width, 560px), calc(100vw - 32px));
    width: var(--bar-width);
    padding: 3px; /* 44px tall with the 36px row and the 1px border */
    border-radius: 999px;
    overflow: visible;
    transition: opacity 0.25s ease, transform 0.3s ease, width 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s linear 0.3s;
}

body.enhance-mode .enhance-bar.visible {
    transition: opacity 0.2s ease, transform 0.3s ease, width 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s;
}


.enhance-input-row {
    gap: 4px;
    transition: opacity 0.2s ease;
}

.enhance-bar:not(.visible) .enhance-input-row {
    opacity: 0;
}

.enhance-bar .enhance-add-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.enhance-bar .enhance-add-btn:hover,
.enhance-bar .enhance-add-btn.active {
    background: hsl(0 0% 95%);
    box-shadow: none;
}

.enhance-bar .enhance-prompt,
.enhance-bar .enhance-prompt:hover,
.enhance-bar .enhance-prompt:focus {
    height: 36px;
    padding: 0 6px;
    border: none;
    background: transparent;
    box-shadow: none;
}

.enhance-bar .enhance-run-btn,
.enhance-bar .enhance-cancel-btn {
    height: 36px;
    border-radius: 999px;
}

.enhance-bar .enhance-run-btn {
    padding: 0 16px;
}

/* Result actions: scene-tinted round buttons and a white Download pill, no box */
.enhance-actions {
    padding: 0;
    gap: 8px;
    background: none;
    border: none;
    box-shadow: none;
}

body.enhance-mode .enhance-actions.visible {
    transition: opacity 0.25s ease 0.12s, transform 0.3s ease 0.08s, visibility 0s;
}

.enhance-actions .enhance-icon-btn {
    width: 56px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: var(--scene-tint);
    color: var(--scene-contrast);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    outline: 0.5px solid rgb(0 0 0 / 0.08);
    outline-offset: -0.5px;
}

body.dark-scene .enhance-actions .enhance-icon-btn {
    outline-color: rgb(255 255 255 / 0.08);
}

.enhance-actions .enhance-icon-btn:hover,
.enhance-actions .enhance-icon-btn.active {
    background: var(--scene-tint-hover);
    box-shadow: none;
}

.enhance-actions .enhance-download-btn {
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    color: hsl(0 0% 9%);
    font-weight: 500;
}

.enhance-actions .enhance-download-btn:hover {
    background-color: hsl(0 0% 94%);
}

@media (max-width: 960px) {
    .enhance-bar {
        --bar-width: min(var(--design-toolbar-width, 560px), calc(100vw - 100px));
    }
}

/* Active (open panel or menu) on the floating controls: a 2px ring outside the control,
   16% black on light scenes and 16% white on dark ones. Keyboard focus: a blue ring.
   Mouse clicks get no focus ring */
:root {
    --active-ring: rgb(0 0 0 / 0.1);
    --focus-ring: hsl(217 91% 60%);
}

body.dark-scene {
    --active-ring: rgb(255 255 255 / 0.28);
}

.floating-toolbar .btn-icon.btn-outline,
.capture-button.active,
.style-pill .select-trigger.active,
.enhance-actions .enhance-icon-btn.active,
.sidebar-btn.active {
    border-color: transparent;
    box-shadow: var(--pill-shadow);
    outline: 2px solid var(--active-ring);
    outline-offset: 0;
}

.sidebar-btn.active,
.enhance-actions .enhance-icon-btn.active {
    border: none;
    box-shadow: none;
}

button:focus,
.select-trigger:focus,
.structure-item:focus {
    outline: none;
}

.style-pill .select-trigger:focus-visible:not(.active) {
    border-color: transparent;
    box-shadow: var(--pill-shadow);
}

button:focus-visible,
.select-trigger:focus-visible,
.structure-item:focus-visible {
    outline: 2px solid var(--focus-ring) !important; /* over the older per-control rings */
    outline-offset: 2px !important;
}

/* Switching modes only fades; the bar morphs only between the prompt and the result actions */
.enhance-bar.no-morph {
    transition-property: opacity, transform, visibility !important;
}

/* Shortcut badges: in the dark tooltips a translucent white square, in menus a light one */
.tooltip-content,
.sidebar-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
}

.sidebar-tip {
    max-width: none;
}

.tooltip-content:has(.kbd) {
    padding: 0 8px 0 10px;
}

.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    padding: 0 4px;
    border-radius: 4px;
    background: rgb(255 255 255 / 0.2);
    color: inherit;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.kbd-light,
.select-item.selected .kbd-light {
    margin-left: auto;
    background: hsl(0 0% 95%);
    color: hsl(0 0% 45%);
}

/* Style controls: each value is a small number field (Camera and video sizes stay plain text) */
input.material-value {
    width: 40px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 4px;
    border: none;
    border-radius: 4px;
    background: hsl(0 0% 95%);
    font-family: inherit;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

input.material-value::-webkit-outer-spin-button,
input.material-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.material-value:hover {
    background: hsl(0 0% 92%);
}

input.material-value:focus {
    background: hsl(0 0% 100%);
    box-shadow: inset 0 0 0 1px #1b1b1b;
}

/* Slider handles: white with a short shadow */
.material-slider::-webkit-slider-thumb,
.annotation-material-slider::-webkit-slider-thumb {
    background: #ffffff;
    border: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 0 0 0.5px rgb(0 0 0 / 0.08);
}

.material-slider::-moz-range-thumb,
.annotation-material-slider::-moz-range-thumb {
    background: #ffffff;
    border: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 0 0 0.5px rgb(0 0 0 / 0.08);
}

/* Mode switch: the unselected tab gets a faint fill on hover */
#modeSwitch .mode-tab:not(.active):hover {
    background: var(--scene-tint);
}

/* Structure color: hovering the dot rings it, and the pill itself stays unhovered */
.style-color .clr-field button {
    transition: box-shadow 0.15s ease;
}

.style-color:hover .clr-field button {
    box-shadow: 0 0 0 3px hsl(0 0% 90%);
}

.style-pill .select-trigger:has(.style-color:hover):not(.active) {
    background-color: hsl(0 0% 100% / 0.95);
}

.material-slider,
.annotation-material-slider {
    cursor: pointer;
}

/* Tooltips wait a moment before showing and hide right away; 8px corners */
.tooltip-content,
.sidebar-tip {
    border-radius: 8px;
}

.tooltip-content {
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.tooltip:hover .tooltip-content {
    transition-delay: 0.45s;
}

.sidebar-tip.visible {
    transition-delay: 0.45s;
}

/* Style controls, camera and video panels fade and rise in like the style dropdown */
.material-panel {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.material-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

/* Buttons and fields use the page font (browsers default them to Arial otherwise) */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Hairline on the floating pills: 0.5px at 5% black, drawn inside so nothing shifts */
.style-pill .select-trigger,
.floating-toolbar .btn-icon,
.capture-button,
.enhance-bar,
.enhance-actions .enhance-download-btn {
    outline: 0.5px solid rgb(0 0 0 / 0.05);
    outline-offset: -0.5px;
}

/* Shortcut badges one weight lighter */
.kbd {
    font-weight: 500;
}

/* Control labels one step up: mode switch, style pill, prompt */
#modeSwitch .mode-tab,
#styleSelectValue,
.enhance-bar .enhance-prompt {
    font-size: 14px;
}

/* Hidden after a click until the pointer leaves (see the pointerdown handler) */
.tooltip.tooltip-dismissed .tooltip-content {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* ===========================================================================
   Panels, menus and modals: one surface (white, blurred, hairline, soft shadow),
   neutral greys, segmented pickers instead of bordered buttons, 8px rows
   =========================================================================== */
:root {
    --surface: hsl(0 0% 100% / 0.97);
    --surface-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 32px rgb(0 0 0 / 0.08);
    --fill: hsl(0 0% 95%);
    --fill-hover: hsl(0 0% 92%);
    --text: hsl(0 0% 9%);
    --text-muted: hsl(0 0% 45%);
}

.material-panel,
.profile-popover-content,
.annotation-modal,
.structure-menu,
.select-content,
.enhance-style-popover,
.enhance-info,
.annotation-select-content,
.interface-distance-select-content {
    background: var(--surface);
    border: none;
    box-shadow: var(--surface-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Menus: 14px corners, 6px inset, 34px rows with 8px corners */
.structure-menu,
.select-content,
.style-pill .select-content,
.enhance-style-popover,
.annotation-select-content,
.interface-distance-select-content {
    padding: 6px;
    border-radius: 14px;
}

.select-item,
.structure-menu-item,
.enhance-style-option,
.annotation-select-item,
.interface-distance-select-item,
.profile-action {
    min-height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}

.enhance-style-option {
    padding: 4px 10px 4px 4px;
}

.select-item:hover,
.structure-menu-item:hover,
.enhance-style-option:hover,
.annotation-select-item:hover,
.interface-distance-select-item:hover,
.profile-action:hover {
    background: var(--fill);
}

.select-item.selected,
.enhance-style-option.active,
.annotation-select-item.selected,
.interface-distance-select-item.selected {
    background: var(--fill);
    font-weight: 500;
}

/* Floating panels (Style controls, Snapshot, 360° video): 16px corners */
.material-panel {
    padding: 16px;
    gap: 14px;
    border-radius: 16px;
}

.material-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

span.material-value {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Segmented pickers: a grey track with the chosen option raised in white */
.surface-style-tabs,
.annotation-surface-style {
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--fill);
}

.surface-style-tabs .surface-tab,
.annotation-surface-style .annotation-surface-tab {
    height: 30px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.surface-style-tabs .surface-tab:not(.active):hover,
.annotation-surface-style .annotation-surface-tab:not(.active):hover {
    background: transparent;
    color: var(--text);
}

.surface-style-tabs .surface-tab.active,
.annotation-surface-style .annotation-surface-tab.active {
    border: none;
    background: hsl(0 0% 100%);
    color: var(--text);
    font-weight: 500;
    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);
}

/* Switches */
.annotation-toggle {
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--text);
}

.annotation-toggle.off {
    background: hsl(0 0% 86%);
}

.annotation-toggle::after {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}

.annotation-toggle:not(.off)::after {
    left: 16px;
}

/* Panel buttons: 40px, 10px corners; primary black, secondary grey */
.material-panel .export-download-btn,
.annotation-modal-footer .btn,
.annotation-add-btn {
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
}

.material-panel .export-download-btn {
    margin-top: 2px;
}

.annotation-modal-footer .btn-secondary,
.annotation-add-btn {
    background: var(--fill);
    color: var(--text);
}

.annotation-modal-footer .btn-secondary:hover,
.annotation-add-btn:hover {
    background: var(--fill-hover);
}

.annotation-modal-footer .btn-primary {
    background: var(--text);
    color: hsl(0 0% 100%);
}

.annotation-modal-footer .btn-primary:hover,
.material-panel .export-download-btn:hover {
    background: hsl(0 0% 17%);
}

.annotation-add-btn {
    width: 100%;
}

/* Annotations: a floating sheet with soft grey cards, no rules between sections */
.annotation-modal {
    top: 16px;
    right: 16px;
    height: calc(100vh - 32px);
    border-radius: 18px;
}

.annotation-modal-header {
    padding: 16px 16px 8px 20px;
    border-bottom: none;
}

.annotation-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.annotation-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    color: var(--text-muted);
}

.annotation-modal-close:hover {
    background: var(--fill);
    color: var(--text);
}

.annotation-modal-body {
    padding: 8px 16px;
}

.annotation-modal-footer {
    padding: 12px 16px 16px;
    border-top: none;
}

.annotation-modal-footer .btn {
    flex: 1;
}

.annotation-item,
.interface-analysis-item {
    border: none;
    border-radius: 14px;
    background: hsl(0 0% 97%);
}

.annotation-item-header,
.interface-item-header {
    border-bottom: none;
    padding: 12px 12px 4px 14px;
}

.annotation-item-controls {
    padding: 8px 12px 12px;
}

/* Interface rows are often collapsed, so the title gets even padding to sit centered,
   and the controls open below it without a divider, the same 12px under the title as in
   the chain cards */
.interface-item-header {
    padding: 10px 12px 10px 14px;
}

.interface-item-controls {
    gap: 8px;
    padding: 0 12px;
    border-top: none;
}

.interface-item-controls.expanded {
    padding: 2px 12px 12px;
}

/* Fields inside the cards sit on white with a hairline */
.annotation-modal .annotation-style-select,
.annotation-modal .range-input,
.annotation-modal .annotation-select-trigger,
.annotation-modal .interface-distance-select-trigger,
.annotation-modal .annotation-material-toggle,
.annotation-modal .annotation-chain-select {
    border: none;
    border-radius: 8px;
    background-color: hsl(0 0% 100%);
    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.04);
}

.annotation-modal .annotation-style-select:hover,
.annotation-modal .range-input:hover,
.annotation-modal .annotation-select-trigger:hover,
.annotation-modal .interface-distance-select-trigger:hover,
.annotation-modal .annotation-material-toggle:hover,
.annotation-modal .annotation-chain-select:hover {
    background-color: hsl(0 0% 98%);
}

.annotation-modal .range-input:focus,
.annotation-modal .annotation-select-container.active .annotation-select-trigger,
.annotation-modal .interface-distance-select-trigger.active {
    border: none;
    box-shadow: 0 0 0 1px var(--text);
}

/* Open material controls: the toggle reads as pressed, without a dark ring */
.annotation-modal .annotation-material-toggle.expanded {
    border: none;
    background-color: var(--fill-hover);
    box-shadow: none;
    color: var(--text);
}

.annotation-modal .annotation-color-picker {
    border: none;
    border-radius: 8px;
    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.1);
}

.annotation-empty-state {
    border: none;
    border-radius: 14px;
    background: hsl(0 0% 97%);
}

/* Profile menu */
.profile-popover-content {
    border-radius: 14px;
}

.profile-divider {
    background: hsl(0 0% 0% / 0.06);
}

/* Import: pill field and button, matching the bottom bar */
.universal-search-input,
.universal-search-btn {
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
}

.universal-search-input {
    padding: 0 16px;
    border-color: rgb(255 255 255 / 0.3);
}

.universal-search-btn:hover:not(:disabled) {
    transform: none;
}

/* Render: style info popover */
.enhance-info {
    border-radius: 16px;
}

/* Annotation colors: a round swatch, like the structure color in the viewer */
.annotation-modal .annotation-color-picker,
.annotation-modal .interface-color-picker {
    border-radius: 50%;
}

.annotation-modal .clr-field:has(.annotation-color-picker) button,
.annotation-modal .clr-field:has(.interface-color-picker) button {
    inset: 5px;
    border-radius: 50%;
}

.annotation-modal .clr-field:has(.annotation-color-picker) button:after,
.annotation-modal .clr-field:has(.interface-color-picker) button:after {
    border-radius: 50%;
}

.annotation-modal .annotation-color-picker,
.annotation-modal .interface-color-picker {
    border: none;
    background: transparent;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Render bar: Generate (and +, Cancel) sit 6px in from the bar's edge
   --------------------------------------------------------------------------- */
.enhance-bar {
    padding: 5px; /* + the 1px border = 6px */
}

.enhance-bar .enhance-add-btn,
.enhance-bar .enhance-prompt,
.enhance-bar .enhance-prompt:hover,
.enhance-bar .enhance-prompt:focus,
.enhance-bar .enhance-run-btn,
.enhance-bar .enhance-cancel-btn {
    height: 32px;
}

.enhance-bar .enhance-add-btn {
    width: 32px;
}

/* Morph between the bar and Download (see setEnhanceSurface) */
.enhance-bar.morphing {
    transition: width 0.4s var(--morph-spring), height 0.4s var(--morph-spring), transform 0.4s var(--morph-spring),
        opacity 0s, visibility 0s !important;
    overflow: hidden; /* a taller prompt is clipped to the shrinking bar */
}

.enhance-bar.morphing .enhance-input-row {
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease 0.15s;
}

.enhance-bar.collapsed .enhance-input-row {
    opacity: 0;
    transition: opacity 0.12s ease;
}

.enhance-bar.morphing .enhance-chips {
    opacity: 0;
}

.enhance-bar-morph-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: hsl(0 0% 9%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.enhance-bar.collapsed .enhance-bar-morph-label {
    opacity: 1;
    transition: opacity 0.2s ease 0.18s;
}

.enhance-actions.morphing {
    transition: none !important;
}

.enhance-actions > .tooltip {
    transition: opacity 0.2s ease, transform 0.32s var(--morph-spring);
}

.enhance-actions.secondary-instant > .tooltip {
    transition: none;
}

.enhance-actions:not(.secondary-hidden).morphing > .tooltip {
    transition-delay: 0.1s;
}

.enhance-actions.secondary-hidden > .tooltip {
    opacity: 0;
    transform: scale(0.85);
}

.enhance-actions.download-hidden .enhance-download-btn {
    opacity: 0;
}

/* Render history: thumbnails closer to the screen's shape */
.enhance-history-item {
    width: 72px;
    height: 56px;
}

/* Chosen style above the bar: a floating pill like the other controls */
.enhance-chip {
    height: 32px;
    padding: 0 4px 0 6px;
    gap: 8px;
    border: none;
    border-radius: 999px;
    background: hsl(0 0% 100% / 0.95);
    box-shadow: var(--pill-shadow);
    outline: 0.5px solid rgb(0 0 0 / 0.05);
    outline-offset: -0.5px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 500;
}

.enhance-chip .enhance-style-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.enhance-chip-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.enhance-chip-remove:hover {
    background: var(--fill);
}

/* In Details the chip is plain (it's inside a panel already) */
.enhance-info .enhance-chip {
    padding: 0 10px 0 6px;
    background: var(--fill);
    box-shadow: none;
    outline: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* The chip's remove button: a centered Lucide x, not a text glyph */
.enhance-chip-remove {
    padding: 0;
    position: relative;
}

.enhance-chip-remove svg {
    display: block;
}

/* While generating, Generate's hover Cancel is the only cancel; the bar's Cancel (back
   to the result) steps aside */
.enhance-bar.locked .enhance-cancel-btn {
    display: none;
}

/* Morph: quick, with a small overshoot that settles */
:root {
    --morph-spring: cubic-bezier(0.3, 1.1, 0.4, 1);
}

/* ---------------------------------------------------------------------------
   Compare: the image fills the dialog; Input / Output floats top left and the close
   button top right, tinted from the image behind them like the mode switch
   --------------------------------------------------------------------------- */
.enhance-compare-dialog {
    position: relative;
    border-radius: 18px;
    --scene-tint: rgb(0 0 0 / 0.05);
    --scene-tint-hover: rgb(0 0 0 / 0.09);
    --scene-contrast: hsl(0 0% 9%);
    --scene-muted: hsl(0 0% 40%);
    --hairline: rgb(0 0 0 / 0.08);
}

.enhance-compare-dialog.dark-frame {
    --scene-tint: rgb(255 255 255 / 0.14);
    --scene-tint-hover: rgb(255 255 255 / 0.2);
    --scene-contrast: rgb(255 255 255 / 0.92);
    --scene-muted: rgb(255 255 255 / 0.7);
    --hairline: rgb(255 255 255 / 0.08);
}

.enhance-compare-bar {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 2;
    height: 44px;
    justify-content: space-between;
    border-bottom: none;
    pointer-events: none;
}

.enhance-compare-bar > * {
    pointer-events: auto;
}

.enhance-compare-frame {
    flex: 1 1 auto;
    height: 100%;
}

.enhance-compare-toggle,
.enhance-compare-close {
    background: var(--scene-tint);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    outline: 0.5px solid var(--hairline);
    outline-offset: -0.5px;
    transition: background 0.2s ease;
}

.enhance-compare-toggle {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 44px;
    padding: 4px;
    border-radius: 999px;
    transform: none;
}

.enhance-compare-toggle .mode-tab {
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
}

.enhance-compare-toggle .mode-tab:not(.active) {
    color: var(--scene-muted);
}

.enhance-compare-toggle .mode-tab:not(.active):hover {
    color: var(--scene-contrast);
    background: var(--scene-tint);
}

.enhance-compare-close {
    position: static;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: none;
    color: var(--scene-contrast);
}

.enhance-compare-close:hover {
    background: var(--scene-tint-hover);
}

/* Compare layout: Input / Output bottom center, close top right */
.enhance-compare-bar {
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: 16px;
    height: auto;
}

.enhance-compare-close {
    position: absolute;
    top: 0;
    right: 0;
}

.enhance-compare-toggle {
    position: absolute;
    top: auto; /* it's also a .mode-switch, which pins it to the top */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* First and last frame of a morph: no child transitions, so nothing blinks at the handoff */
.enhance-bar.morph-instant * {
    transition: none !important;
}

/* Render history: same rhythm as the structure thumbnails. Unselected ones are just dimmed;
   the selected one gets the structure thumbnail's 1.5px ring in the scene's contrast color,
   drawn over the image */
.enhance-history {
    gap: 8px;
}

.enhance-history-item {
    position: relative;
    border-radius: 10px;
    background: var(--scene-tint);
    box-shadow: none;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.enhance-history-item:hover {
    opacity: 1;
}

.enhance-history-item.active {
    opacity: 1;
    box-shadow: none;
}

.enhance-history-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px var(--scene-contrast);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.enhance-history-item.active::after {
    opacity: 1;
}

/* Render history: the scene hairline and the bottom controls' soft shadow. The list's
   padding grows so its scroll box doesn't clip the shadow; the offset keeps the
   thumbnails where they were (24px from the corner) */
.enhance-history {
    top: 12px;
    right: 12px;
    padding: 12px;
}

.enhance-history-item {
    outline: 0.5px solid rgb(0 0 0 / 0.08);
    outline-offset: -0.5px;
    box-shadow: var(--pill-shadow);
}

.enhance-history-item.active {
    box-shadow: var(--pill-shadow);
}

body.dark-scene .enhance-history-item {
    outline-color: rgb(255 255 255 / 0.08);
}

/* Scene color: the same on every scene. A white ring with a soft shadow, and a 0.5px dark
   edge on the color so light colors still read against the white ring */
.scene-color-corner .clr-field button {
    background: hsl(0 0% 100%);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 2px 8px rgb(0 0 0 / 0.1);
}

.scene-color-corner .clr-field button:after {
    box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.2);
}

/* Color previews get a soft light from the top, so they read as a surface, not a flat dot */
.clr-field button:after {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.3) 0%, rgb(255 255 255 / 0) 65%);
}

/* Scene color: a 2px white ring */
.scene-color-corner .clr-field button:after {
    inset: 2px;
}

/* Scene color: 26px with its 2px ring, so the color itself is 22px like the structure color */
.scene-color-corner .clr-field button {
    inset: 9px;
}

/* Mode switch hover: a fainter fill than the sidebar buttons (half their step), since it
   sits on the switch's own tint, plus the label darkening. Muted text is a neutral grey */
body {
    --scene-tint-subtle: rgb(0 0 0 / 0.025);
    --scene-muted: hsl(0 0% 40%);
}

body.dark-scene {
    --scene-tint-subtle: rgb(255 255 255 / 0.05);
    --scene-muted: rgb(255 255 255 / 0.7);
}

#modeSwitch .mode-tab:not(.active):hover {
    background: var(--scene-tint-subtle);
}

/* Cards in panels: a light shade of the panel instead of a fixed grey. The panel is 97%
   white, so a bit of the scene shows through it; on dark or colored scenes a fixed
   97% grey ends up nearly the same as the panel and the card disappears */
.annotation-item,
.interface-analysis-item,
.annotation-empty-state {
    background: rgb(0 0 0 / 0.035);
}

/* Import and Predict share the structure modal; each mode shows its own field */
.pdb-modal[data-mode="import"] .predict-sequence-input,
.pdb-modal[data-mode="import"] .predict-sequence-count,
.pdb-modal[data-mode="predict"] #universalSearchInput {
    display: none;
}

/* Predict: a multi-line field that grows with the sequence, then scrolls (height set in
   updatePredictSequence) */
.universal-search-input.predict-sequence-input {
    height: auto;
    min-height: 88px;
    max-height: 200px;
    padding: 12px 16px;
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.predict-sequence-count {
    min-height: 18px;
    margin-top: -4px;
    color: rgb(255 255 255 / 0.7);
    font-size: 13px;
    text-align: right;
}

.predict-sequence-count.error {
    color: hsl(0 90% 75%);
}

/* + menu: a hairline between the ways to add a structure and Surprise me */
.structure-menu-divider {
    height: 1px;
    margin: 4px 6px;
    background: hsl(0 0% 0% / 0.06);
}

/* Import / Predict close: the Compare close button on the dark overlay, a 44px round
   white tint, top right like the other corner controls */
.pdb-modal-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: rgb(255 255 255 / 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    outline: 0.5px solid rgb(255 255 255 / 0.08);
    outline-offset: -0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pdb-modal-close:hover {
    background: rgb(255 255 255 / 0.2);
}

/* Style panel: one-line rows (label, slider, value), 28px tall, so the panel stays short.
   More (Thickness, Width, Sheet arrows) folds away below a hairline. */
#materialPanel {
    width: 280px;
    box-sizing: border-box;
    gap: 8px;
    padding: 14px 16px;
}

#materialPanel .material-control:has(> .material-slider),
#surfaceStyleControl {
    display: grid;
    grid-template-columns: 64px 1fr 40px;
    column-gap: 12px;
    align-items: center;
    min-height: 28px;
}

#materialPanel .material-control:has(> .material-slider) .material-header,
#surfaceStyleControl .material-header {
    display: contents;
}

#materialPanel .material-label {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: nowrap;
}

#materialPanel .material-slider {
    grid-column: 2;
    grid-row: 1;
}

#materialPanel input.material-value {
    grid-column: 3;
    grid-row: 1;
}

#surfaceStyleControl .surface-style-tabs {
    grid-column: 2 / 4;
    grid-row: 1;
}

#materialPanel .material-control:not(:has(> .material-slider)) .material-header {
    min-height: 28px;
}

.material-advanced {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid hsl(0 0% 0% / 0.06);
}

.material-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}

.material-advanced-toggle:hover,
.material-advanced.open .material-advanced-toggle {
    color: var(--text);
}

/* The chevron flips without spinning, like the style pill's */
.material-advanced.open .material-advanced-toggle svg {
    transform: scaleY(-1);
}

.material-advanced-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}

.material-advanced.open .material-advanced-body {
    grid-template-rows: 1fr;
}

.material-advanced-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.material-advanced-inner > :first-child {
    margin-top: 4px;
}

/* Profile button: the "Sign in" tooltip is for guests only */
body:not(.guest) .profile-corner .tooltip-content {
    display: none;
}

/* Render upsell for guests: a modal over Edit (the dim, blurred overlay of the Import
   modal). The ticker sits flush at the top, its first row cut by the modal's edge, and
   fades out at the sides and the bottom. */
.render-upsell-overlay {
    position: fixed;
    inset: 0;
    z-index: 3001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.render-upsell-overlay.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
}

.render-upsell {
    position: relative;
    width: min(400px, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 28px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--surface-shadow);
    transform: translateY(4px);
    transition: transform 0.2s ease;
}

.render-upsell-overlay.open .render-upsell {
    transform: translateY(0);
}

/* A 272px window onto three 140px rows, shifted up 84px: the top row is cut by the
   modal's edge, and the window ends partway down the bottom row, which fades out before
   its lower edge. The WebKit video is this same window (rows baked in). The panel is solid
   white to match the video's background. */
.render-upsell-ticker {
    height: 272px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
    mask-image: linear-gradient(to bottom, #000 58%, transparent);
}

.render-upsell-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -84px;
}

/* Scrolled by buildRenderUpsellRows (Web Animations, in px). Gaps are each card's right
   margin, so one set of cards ends exactly where the repeat begins. */
.render-upsell-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.render-upsell-card {
    flex: none;
    width: 200px;
    height: 140px;
    margin-right: 8px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--fill);
}

.render-upsell-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

.render-upsell-rows[hidden],
.render-upsell-video[hidden] {
    display: none;
}

/* The Compare close, smaller: 32px, frosted white over the cards */
.render-upsell-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.8);
    color: var(--text);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    outline: 0.5px solid rgb(0 0 0 / 0.04);
    outline-offset: -0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.render-upsell-close:hover {
    background: rgb(255 255 255 / 0.95);
}

.render-upsell-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 32px;
    text-align: center;
}

.render-upsell-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
}

.render-upsell-body {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: balance;
}

.render-upsell-btn {
    align-self: center;
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    background: var(--text);
    color: hsl(0 0% 100%);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.render-upsell-btn:hover {
    background: hsl(0 0% 17%);
}

.render-upsell-btn:focus:not(:focus-visible) {
    outline: none;
}

/* Annotation and interface cards: style controls in one-line rows like the Style panel
   (label, slider, value), sized for the narrower card */
.annotation-material-controls .annotation-material-control,
.annotation-material-controls .annotation-material-property,
.annotation-material-controls .annotation-surface-style {
    display: grid;
    grid-template-columns: 60px 1fr 36px;
    column-gap: 10px;
    align-items: center;
    min-height: 28px;
}

.annotation-material-controls .annotation-material-header {
    display: contents;
}

.annotation-material-controls .annotation-material-label {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.annotation-material-controls .annotation-material-slider {
    grid-column: 2;
    grid-row: 1;
}

/* The value is the Style panel's number field (input.material-value), fitted to the column */
.annotation-material-controls input.annotation-material-value {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
}

/* Residue count beside an interface's name: quiet text, so it doesn't read as a field */
.interface-item-badge {
    min-width: 0;
    height: auto;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Surface style: the segmented track sits beside its label instead of around both */
.annotation-material-controls .annotation-surface-style {
    padding: 0;
    border-radius: 0;
    background: none;
}

.annotation-material-controls .annotation-surface-tabs {
    grid-column: 2 / 4;
    grid-row: 1;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--fill);
}

/* Site cards (from the file): a quiet residue line where ranges have chain and start-end */
.range-site-residues {
    padding: 0 12px 0 14px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Phones (up to 600px wide). The bottom row spans the screen: the style pill takes
   the free space and icon buttons are 44px wide. Profile and scene color sit above
   the row's ends, and the + menu opens below + so the mode switch can't cover it.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .bottom-layout-container {
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        transform: none;
        justify-content: space-between;
        gap: 8px;
    }

    .bottom-layout-container .floating-toolbar,
    .bottom-layout-container .floating-toolbar > .section {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }

    .style-pill {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .style-pill .select-trigger {
        width: 100%;
        min-width: 0;
        gap: 6px;
        padding-right: 12px;
    }

    .style-pill .select-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .floating-toolbar .btn-icon,
    .capture-button {
        width: 44px;
        min-width: 44px;
    }

    /* Profile tops the left column, then a faint line, then + and the thumbnails */
    .profile-corner {
        left: 16px;
        top: 20px;
        bottom: auto;
    }

    .structure-sidebar {
        top: 72px;
    }

    .structure-sidebar::before {
        content: '';
        width: 28px;
        height: 1px;
        margin-bottom: -4px; /* 8px above and below the line */
        background: rgb(0 0 0 / 0.08);
    }

    body.dark-scene .structure-sidebar::before {
        background: rgb(255 255 255 / 0.14);
    }

    .scene-color-corner {
        right: 16px;
        bottom: 72px;
    }

    .structure-sidebar {
        left: 16px;
    }

    .structure-history {
        max-height: calc(100dvh - 230px);
    }

    .structure-menu {
        top: calc(100% + 8px);
        left: 0;
    }

    /* Over the thumbnails it now opens across */
    .structure-add {
        position: relative;
        z-index: 2;
    }

    .enhance-bar,
    .enhance-actions {
        left: 50%;
    }

    .enhance-bar {
        --bar-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
    }
}

/* iOS colors buttons without a set color system blue */
.capture-button {
    color: var(--text);
}

/* Touch screens have no hover, so a tapped control would keep its tooltip up */
@media (hover: none) {
    .tooltip-content,
    .sidebar-tip {
        display: none !important;
    }
}

/* Render aspect ratio: a 32px icon button before Generate; with a ratio other than Match
   view it grows into a pill with the ratio, e.g. "16:9" */
.enhance-bar .enhance-ratio-btn {
    width: auto;
    min-width: 32px;
    gap: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
}

.enhance-bar .enhance-ratio-btn.has-label {
    padding: 0 7px 0 10px;
    font-size: 12px;
    font-weight: 500;
}

/* A ratio other than Match view is an active setting: faint blue pill, blue label and icon */
:root {
    --accent-blue: hsl(217 91% 52%);
    --accent-blue-fill: hsl(217 91% 60% / 0.1);
}

.enhance-bar .enhance-ratio-btn.has-label,
.enhance-bar .enhance-ratio-btn.has-label:hover,
.enhance-bar .enhance-ratio-btn.has-label.active {
    background: var(--accent-blue-fill);
    color: var(--accent-blue);
}

.enhance-bar .enhance-ratio-btn.has-label:hover,
.enhance-bar .enhance-ratio-btn.has-label.active {
    background: hsl(217 91% 60% / 0.16);
}

.enhance-ratio-label:empty {
    display: none;
}

.enhance-bar .enhance-ratio-btn:disabled {
    opacity: 0.4;
    cursor: default;
    background: transparent;
}

/* Its menu opens above it, at the bar's right */
.enhance-bar .enhance-ratio-popover,
.enhance-bar.has-chip .enhance-ratio-popover {
    left: auto;
    right: 12px;
    bottom: calc(100% + 8px);
    min-width: 210px;
}

.enhance-ratio-shape-box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enhance-ratio-option {
    color: var(--text);
}

.enhance-ratio-option.active {
    background: var(--fill);
    font-weight: 500;
}

.enhance-ratio-value {
    margin-left: auto;
    font-weight: 400;
    color: var(--text-muted);
}

/* With a ratio framed, the view snapshot can be dragged and zoomed under the frame */
.enhance-stage.adjustable {
    cursor: grab;
    touch-action: none;
}

.enhance-stage.adjustable.dragging {
    cursor: grabbing;
}

.enhance-stage.adjustable .enhance-stage-img {
    inset: auto;
    left: 0;
    top: 0;
    max-width: none;
    object-fit: fill;
    transform-origin: 0 0;
    -webkit-user-drag: none;
    user-select: none;
}

/* A framed image (a result, or the input during a run) sits exactly on the frame */
body.enhance-framed .enhance-stage:not(.adjustable) .enhance-stage-img {
    inset: auto;
    left: var(--frame-left);
    top: var(--frame-top);
    width: var(--frame-width);
    height: var(--frame-height);
    border-radius: 12px;
}

/* Aspect ratio frame: 12px corners, everything outside it dimmed, black 4% on light
   scenes and white 6% on dark ones, so the frame reads on any background */
.enhance-mask {
    position: fixed;
    left: var(--frame-left, 0);
    top: var(--frame-top, 0);
    width: var(--frame-width, 0);
    height: var(--frame-height, 0);
    z-index: 950;
    pointer-events: none;
    border-radius: 12px;
    box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0.04);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

body.dark-scene .enhance-mask {
    box-shadow: 0 0 0 200vmax rgb(255 255 255 / 0.06);
}

body.enhance-mode.enhance-framed .enhance-mask {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
}

@media (max-width: 600px) {
    /* Icon only on phones; the menu shows the choice */
    .enhance-ratio-label {
        display: none;
    }

    .enhance-bar .enhance-ratio-btn.has-label {
        padding: 0 6px;
    }
}

/* While Render draws the view in another shape (captureFramedView) */
#viewer.framing canvas,
#viewer.framing > div {
    transition: none !important;
}

/* "Add reference" in the styles menu: a placeholder thumbnail with a plus */
.enhance-style-option .enhance-reference-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fill);
    box-shadow: none;
    color: var(--text-muted);
}

.enhance-style-option:hover .enhance-reference-placeholder {
    background: var(--fill-hover);
    color: var(--text);
}

/* While the wide snapshot is drawn (a moment after entering Render with a ratio set), a
   small spinner sits in the middle of the frame, in the scene's contrast color */
.enhance-mask::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid rgb(0 0 0 / 0.1);
    border-top-color: rgb(0 0 0 / 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: enhanceFrameSpin 0.8s linear infinite;
}

body.dark-scene .enhance-mask::after {
    border-color: rgb(255 255 255 / 0.14);
    border-top-color: rgb(255 255 255 / 0.7);
}

body.enhance-preparing .enhance-mask::after {
    opacity: 1;
    transition: none;
}

@keyframes enhanceFrameSpin {
    to { transform: rotate(360deg); }
}

/* Then the molecule eases into the frame */
.enhance-stage.adjustable.easing .enhance-stage-img {
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .enhance-stage.adjustable.easing .enhance-stage-img {
        transition: opacity 0.35s ease;
    }
}

/* Compare: Input / Output top center, on the close button's line (both 44px, top 16px) */
.enhance-compare-toggle {
    top: 0;
    bottom: auto;
}

/* Render history with many results: the list runs to the bottom of the window and scrolls,
   without a scrollbar. Edges with more results past them fade out over 40px instead of
   cutting off. Narrow windows keep it clear of the prompt bar. */
.enhance-history {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    scrollbar-width: none;
    overscroll-behavior: contain;
    --fade-top: 0px;
    --fade-bottom: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
}

.enhance-history::-webkit-scrollbar {
    display: none;
}

.enhance-history.more-above {
    --fade-top: 40px;
}

.enhance-history.more-below {
    --fade-bottom: 40px;
}

@media (max-width: 900px) {
    .enhance-history {
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
    }
}

/* Touch screens: no hover, so a tap opens a structure at once (iOS waits for a second tap when
   a hover reveals something). The open structure shows its remove button instead */
@media (hover: none) {
    .structure-item:hover .structure-remove,
    .structure-item:focus-within .structure-remove {
        opacity: 0;
        transform: scale(0.9);
    }

    /* Hidden remove buttons can't be hit by a tap near a thumbnail's corner */
    .structure-item:not(.active) .structure-remove {
        pointer-events: none;
    }

    .structure-item:hover {
        background: var(--scene-tint);
    }

    .structure-item.active .structure-remove {
        opacity: 1;
        transform: none;
    }
}

/* Import / Predict: the overlay fades in, then the content settles in as one block from 8px
   below with a short blur, on a long ease-out. Closing is a quicker fade of the whole
   overlay. The old transitions never ran (display: none) */
.pdb-modal-content,
.pdb-modal-title {
    opacity: 1;
    transform: none;
    transition: none;
}

.pdb-modal.active {
    animation: pdbOverlayIn 0.15s ease-out both;
}

.pdb-modal.active .pdb-modal-close {
    animation: pdbOverlayIn 0.2s ease-out both;
}

.pdb-modal.active .pdb-modal-content {
    animation: pdbContentIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pdb-modal.active.closing {
    animation: pdbOverlayOut 0.12s ease-in both;
    pointer-events: none;
}

@keyframes pdbOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pdbOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes pdbContentIn {
    from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pdb-modal.active .pdb-modal-content {
        animation-name: pdbOverlayIn;
    }
}

/* Import / Predict take the scene's tone: a light scene gets a white veil with dark text,
   a dark scene a black veil with light text, both over the 8px blur */
.pdb-modal {
    --veil: rgb(255 255 255 / 0.5);
    --veil-text: hsl(0 0% 9%);
    --veil-muted: hsl(0 0% 28%); /* the white veil lifts the text, so it starts darker */
    --veil-field: rgb(255 255 255 / 0.7);
    --veil-field-border: rgb(0 0 0 / 0.1);
    --veil-field-focus: rgb(0 0 0 / 0.45);
    --veil-placeholder: hsl(0 0% 55%);
    --veil-button: #1b1b1b;
    --veil-button-hover: hsl(0 0% 17%);
    --veil-button-text: hsl(0 0% 100%);
    --veil-tint: rgb(0 0 0 / 0.05);
    --veil-tint-hover: rgb(0 0 0 / 0.09);
    --veil-hairline: rgb(0 0 0 / 0.08);
    --veil-error: hsl(0 72% 45%);
    background: var(--veil);
}

body.dark-scene .pdb-modal {
    --veil: rgb(0 0 0 / 0.4);
    --veil-text: hsl(0 0% 100%);
    --veil-muted: rgb(255 255 255 / 0.7);
    --veil-field: rgb(255 255 255 / 0.12);
    --veil-field-border: rgb(255 255 255 / 0.2);
    --veil-field-focus: rgb(255 255 255 / 0.7);
    --veil-placeholder: rgb(255 255 255 / 0.55);
    --veil-button: hsl(0 0% 100%);
    --veil-button-hover: hsl(0 0% 90%);
    --veil-button-text: hsl(0 0% 9%);
    --veil-tint: rgb(255 255 255 / 0.14);
    --veil-tint-hover: rgb(255 255 255 / 0.2);
    --veil-hairline: rgb(255 255 255 / 0.08);
    --veil-error: hsl(0 90% 75%);
}

.pdb-modal-title {
    color: var(--veil-text);
    text-shadow: none;
}

.pdb-modal .search-info small,
.pdb-modal .predict-sequence-count {
    color: var(--veil-muted);
}

.pdb-modal .predict-sequence-count.error {
    color: var(--veil-error);
}

.pdb-modal .universal-search-input {
    background: var(--veil-field);
    border-color: var(--veil-field-border);
    color: var(--veil-text);
}

.pdb-modal .universal-search-input:focus {
    border-color: var(--veil-field-focus);
}

.pdb-modal .universal-search-input::placeholder {
    color: var(--veil-placeholder);
}

.pdb-modal .universal-search-btn {
    background: var(--veil-button);
    color: var(--veil-button-text);
}

.pdb-modal .universal-search-btn:hover:not(:disabled) {
    background: var(--veil-button-hover);
}

.pdb-modal .pdb-modal-close {
    background: var(--veil-tint);
    color: var(--veil-text);
    outline-color: var(--veil-hairline);
}

.pdb-modal .pdb-modal-close:hover {
    background: var(--veil-tint-hover);
}

/* Import / Predict type and rhythm, in line with the Render upsell: a 24px/600 title with
   tight tracking, a 15px muted line under it 8px away (balanced wrap), then 28px to the
   field. Field and button are 44px pills like the bottom bar, 12px apart, 400px wide */
.pdb-modal-content {
    gap: 0;
    width: min(400px, calc(100vw - 48px));
    max-width: none;
}

.pdb-modal-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.pdb-modal .search-info {
    max-width: 340px;
    margin: 8px 0 28px;
    text-align: center;
}

.pdb-modal .search-info small {
    font-size: 15px;
    line-height: 1.45;
    text-wrap: balance;
}

.pdb-modal .search-container {
    gap: 12px;
    max-width: none;
    margin: 0;
}

.pdb-modal .universal-search-input,
.pdb-modal .universal-search-btn {
    height: 44px;
    border-radius: 999px;
    font-size: 14px;
}

.pdb-modal .universal-search-input {
    padding: 0 18px;
}

.pdb-modal .universal-search-input.predict-sequence-input {
    height: auto;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 13px;
}

/* The count sits inside the field's bottom right corner, so typing never moves the layout;
   the field keeps room for it below the text */
.predict-sequence-field {
    position: relative;
    width: 100%;
}

.pdb-modal[data-mode="import"] .predict-sequence-field {
    display: none;
}

.pdb-modal .universal-search-input.predict-sequence-input {
    display: block;
    padding-bottom: 32px;
}

.pdb-modal .predict-sequence-count {
    position: absolute;
    right: 16px;
    bottom: 10px;
    left: 16px;
    min-height: 0;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Annotations empty state: a gapped outline instead of a filled card, so the Add new button
   is the only filled shape in it. The outline is an SVG drawn at the box's exact size in
   js/ui.js (drawDashedOutline): inset by half the stroke so nothing is clipped, with the
   dash spacing evened out so the pattern closes cleanly around the 14px corners */
.annotation-empty-state {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0; /* a radius would clip the outline's corners; the SVG draws its own */
}

/* Render prompt: one line between + and the ratio. When its text outgrows that slot, the bar
   becomes two rows (.multiline): the text runs the full width on top, up to five 20px lines,
   and +, the ratio and Generate stay on the bottom row. The text sits 6px in from the bar's
   content edge, so in two rows it lines up with the + icon's left side area, and the gap
   between the rows is 4px. The bar's radius is 22px: a pill at one line, a rounded box
   when taller; its bottom edge stays put and it grows up (js: sizeEnhancePrompt) */
.enhance-bar {
    border-radius: 22px;
    justify-content: flex-end;
}

.enhance-bar .enhance-input-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "add text cancel ratio run";
    align-items: center;
    column-gap: 4px;
    row-gap: 4px;
}

.enhance-bar .enhance-slot-add { grid-area: add; }
.enhance-bar .enhance-prompt { grid-area: text; }
.enhance-bar .enhance-cancel-btn { grid-area: cancel; }
.enhance-bar .enhance-slot-ratio { grid-area: ratio; }
.enhance-bar .enhance-slot-run { grid-area: run; }

.enhance-bar.multiline .enhance-input-row {
    grid-template-areas:
        "text text text text text"
        "add . cancel ratio run";
}

.enhance-bar .enhance-prompt,
.enhance-bar .enhance-prompt:hover,
.enhance-bar .enhance-prompt:focus {
    display: block;
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 6px;
    line-height: 20px;
    resize: none;
    overflow-y: hidden;
    font-family: inherit;
    color: var(--text);
}

.enhance-bar.multiline .enhance-prompt,
.enhance-bar.multiline .enhance-prompt:hover,
.enhance-bar.multiline .enhance-prompt:focus {
    padding: 6px 10px 0;
}

.enhance-bar .enhance-prompt::placeholder {
    color: var(--text-muted);
}


/* Switching images. Compare's Input / Output swaps instantly, with the frame color set in
   the same frame: any fade let the frame color show as lines around the image's edges, and
   an instant flip makes the difference easier to see. On the stage, the incoming image fades
   in on top of the outgoing one, which drops out when the fade ends */
.enhance-compare-frame,
.enhance-compare-img,
.enhance-compare-img.visible {
    transition: none;
}

/* No backdrop blur on Compare's controls: Safari doesn't redraw a backdrop when the image
   behind it swaps without animating, so the controls kept showing the previous image
   (a white close button on a black output). They sit on the image's plain background,
   where the blur wasn't visible anyway */
.enhance-compare-toggle,
.enhance-compare-close {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.enhance-stage-img {
    z-index: 0;
    transition: opacity 0s linear 0.25s;
}

.enhance-stage-img.visible {
    z-index: 1;
    transition: opacity 0.25s ease;
}

.enhance-generating {
    z-index: 2;
}


/* Generate's arrow icon is for phones only */
.enhance-run-btn .run-icon {
    display: none;
}

/* The prompt's placeholder stays on one line (it wrapped and was cut off on phones) */
.enhance-bar .enhance-prompt:placeholder-shown {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.enhance-bar .enhance-prompt::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    /* Generate is a 32px round arrow like + and the ratio button; while running it shows only
       the spinner, and there's no Cancel on phones */
    .enhance-bar .enhance-run-btn {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .enhance-run-btn .run-idle,
    .enhance-run-btn .run-cancel,
    .enhance-run-btn.running .run-icon {
        display: none !important;
    }

    .enhance-run-btn:not(.running) .run-icon {
        display: inline-flex;
    }

    .enhance-run-btn.running .run-busy {
        visibility: visible !important;
        gap: 0;
        font-size: 0;
    }

    .enhance-run-btn.running .run-busy .run-spinner {
        width: 16px;
        height: 16px;
    }

    .enhance-run-btn.running {
        pointer-events: none;
    }

    /* Import / Predict sit in the top part of the screen, so the field and button stay above
       the keyboard and nothing needs to scroll */
    .pdb-modal {
        align-items: flex-start;
        padding-top: calc(env(safe-area-inset-top, 0px) + 112px);
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* Annotations: a sheet at the bottom that's only as tall as its content (at most 60% of
       the screen, scrolling inside), so the structure stays in view above it */
    .annotation-modal {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        height: auto;
        max-height: 60vh;
        max-height: 60dvh;
        transform: translateY(8px);
    }

    .annotation-modal.active {
        transform: none;
    }

    .annotation-modal-content {
        height: auto;
        min-height: 0;
        max-height: inherit;
    }

    .annotation-modal-body {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* Safari zooms the page into any field under 16px when it's focused, which shifted the view.
   Fields on touch screens are 16px */
@media (hover: none) and (pointer: coarse) {
    .pdb-modal .universal-search-input,
    .pdb-modal .universal-search-input.predict-sequence-input,
    .enhance-bar .enhance-prompt,
    .enhance-bar .enhance-prompt:hover,
    .enhance-bar .enhance-prompt:focus,
    .annotation-modal input[type="text"],
    .annotation-modal input:not([type]),
    .annotation-modal textarea {
        font-size: 16px;
    }
}

/* Sequences break anywhere, but the placeholder breaks between words */
.pdb-modal .predict-sequence-input::placeholder {
    word-break: normal;
    overflow-wrap: normal;
}