/* MIXX Platform Styles */

/* == Table of Contents (Ctrl/Cmd+F the tokens) ==
   [THEME] Theme transitions, inputs, placeholders
   [SYNC]  Sync modal + protocol UI
   [DATA]  Data tab table + layout
   [MEDIA] Media tab layout + upload UI
   [POI]   POI chips, timeline, inline inputs
   [LAYOUT] Global layout, navbar, sidebar, panels
   [MODAL] Modal shell + auth/login/register
   [AI]    Mixx AI panel
   [ROLE]  Device role management
   [BG]    Background grid + visuals
*/

/* Restore visibility for elements hidden in critical CSS (prevents FOUC) */
.main-layout, .navbar, .sidebar, .modal, .panel-slot, .workspace-panel, .editor-column, .viewer-column, .editor-header, .view-switcher-row, .mode-selector {
  opacity: 1;
  visibility: visible;
}

/* Theme Transition Support - Targeted selectors for better performance */
a, button, input, select, textarea,
.tab-btn, .subtab-btn, .icon-btn, .btn, .modal, .panel,
.nav-icon-button, .project-item, .poi-list-item,
.sidebar, .navbar, .editor-column, .viewer-column {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Specific opacity transitions only for safe elements */
.tab-btn, .subtab-btn, .icon-btn, .btn, .modal, .panel {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;
}

/* Ensure all form elements use theme variables by default */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), 
textarea, 
select {
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-input-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus, 
textarea:focus, 
select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(90, 139, 255, 0.15);
}

/* Themed placeholders for all inputs */
input::placeholder,
textarea::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

/* Disable transitions during theme switching to prevent flicker */
.theme-transitioning * {
  transition: none !important;
}

/* Sync modal themed body and link text */
.sync-modal-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 100%;
}
.sync-qr {
  margin: 18px 0;
}
.sync-link-text {
  font-size: 1.05rem;
  color: var(--color-accent);
  word-break: break-all;
}

/* Sync modal revamp */
.sync-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(120deg, rgba(90, 139, 255, 0.28), rgba(90, 139, 255, 0.08));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.sync-title-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sync-title-text {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(90, 139, 255, 0.14);
  color: var(--color-accent);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sync-pill--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-muted);
}

.sync-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.08);
  transition: all 0.25s ease;
  background: #9ca3af;
}

.sync-status-dot.sync-active {
  background: #22c55e;
  box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.12), 0 0 18px #22c55e66;
}

.sync-status-dot.sync-inactive {
  background: #9ca3af;
  box-shadow: 0 0 0 8px rgba(156, 163, 175, 0.12);
}

.sync-hero-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sync-lede {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.sync-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 4px;
}

.sync-quick-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.sync-quick-actions .btn-primary,
.sync-quick-actions .btn-danger {
  min-width: 180px;
}

.sync-help-text {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.sync-tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sync-chip--accent {
  background: rgba(90, 139, 255, 0.18);
  color: var(--color-accent);
  border-color: rgba(90, 139, 255, 0.4);
}

.sync-chip--muted {
  color: var(--color-muted);
}

.sync-id-card {
  background: linear-gradient(140deg, rgba(90, 139, 255, 0.16), rgba(90, 139, 255, 0.05));
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.sync-id-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.sync-id-value {
  font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  word-break: break-all;
}

.sync-copy-btn {
  justify-self: flex-start;
}

.sync-id-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sync-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.sync-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.sync-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sync-card h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.sync-status-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.sync-status-row > * {
  min-width: 0; /* Prevent grid children from forcing overflow */
}

.sync-qr-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.sync-qr-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 12px;
  background: var(--color-surface, #0f111a);
  border-radius: 12px;
  border: 1px dashed rgba(90, 139, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.sync-link-display {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--color-muted);
  word-break: break-word;
}

.sync-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.sync-stats li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0; /* Allow flex items to shrink below content size */
  align-items: center;
}

.stat-label {
  color: var(--color-muted);
  font-size: 0.9rem;
  flex-shrink: 0; /* Prevent label from shrinking */
}

.stat-value {
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  min-width: 0; /* Allow value to shrink */
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-value--mono {
  font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
  word-break: break-all; /* Break long session IDs */
}

/* Session ID with copy button container */
.stat-value--mono > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.stat-value--mono .btn-ghost {
  flex-shrink: 0;
}

.sync-input-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.sync-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Light mode adjustments for sync modal */
[data-theme="light"] .sync-modal-header {
  background: linear-gradient(120deg, rgba(90, 139, 255, 0.12), rgba(90, 139, 255, 0.06));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* Neutral sync hero background */
.sync-hero {
  background: none;
  border: none;
}

[data-theme="light"] .sync-hero {
  background: none;
  border: none;
}

[data-theme="light"] .sync-chip {
  background: #f3f6ff;
  color: #3b4b7a;
  border-color: rgba(90, 139, 255, 0.18);
}

[data-theme="light"] .sync-chip--accent {
  background: #e8efff;
  color: #2c4fb3;
}

[data-theme="light"] .sync-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .sync-stats li {
  background: #f6f8ff;
  border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .sync-qr-frame {
  background: #f9fbff;
  border-color: rgba(90, 139, 255, 0.35);
}

/* Sleek multi-device modal layout */
.sync-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.sync-card-heading h3 {
  margin: 0;
  font-size: 1rem;
}
.sync-card-heading p {
  margin: 2px 0 0;
  line-height: 1.3;
}
.sync-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(90, 139, 255, 0.12);
}
.sync-chip-label {
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}
.sync-chip-value {
  font-weight: 600;
}
.sync-meta {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sync-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sync-meta-label {
  color: var(--color-muted);
  font-size: 0.85rem;
}
.sync-meta-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sync-code {
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
}
.sync-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sync-card--server .sync-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sync-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.sync-card--controls .sync-control-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#sync-modal .modal-content {
  --modal-max-height: calc(100vh - 80px);
  --modal-width: min(1200px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  margin: 24px auto;
}
#sync-modal .modal-body {
  padding-top: 12px;
  padding-bottom: 12px;
  overflow-y: visible;
}

/* Copy button styling for session ID - see base .icon-btn at line ~3385 */

.icon-btn:hover {
  background: var(--color-navbar-bg-start);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: translateY(0);
}
/* Modal input field dark background for consistency */
.form-control {
  background: var(--color-input-bg) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-input-border) !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  font-size: 1em !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Password input with inline eye toggle */
.password-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field-wrapper .form-control {
  padding-right: 44px !important;
  flex: 1 1 auto;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted, #8b8fa3);
  cursor: pointer;
  border-radius: 6px;
  line-height: 0;
}

.password-toggle:hover {
  color: var(--color-accent, #5a8bff);
  background: rgba(90, 139, 255, 0.12);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--color-accent, #5a8bff);
  outline-offset: 2px;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* ========================================
   Sync Protocol UI Styles
   ======================================== */

/* Sync Status Indicator */
.sync-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #9ca3af;
  transition: background-color 0.3s ease;
}

.sync-indicator.status-active {
  background-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.sync-indicator.status-inactive {
  background-color: #9ca3af;
}

/* Sync Notification */
.sync-notification {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
}

.sync-notification.hidden {
  display: none;
}

.sync-notification-success {
  background-color: var(--notification-success-bg);
  color: var(--notification-success-text);
  border: 1px solid var(--notification-success-border);
}

.sync-notification-error {
  background-color: var(--notification-error-bg);
  color: var(--notification-error-text);
  border: 1px solid var(--notification-error-border);
}

.sync-notification-info {
  background-color: var(--notification-info-bg);
  color: var(--notification-info-text);
  border: 1px solid var(--notification-info-border);
}

/* Sync Button Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Sync button relative positioning for indicator */
#sync-toggle-btn {
  position: relative;
}

/* ---------- Data Tab Table Styles ---------- */
.data-table-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.data-filter-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.95em;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.data-filter-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.data-btn-small {
  padding: 8px 12px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.data-btn-small:hover {
  background: var(--interactive-bg);
  border-color: var(--interactive-border-hover);
  color: var(--color-text-strong);
  transform: translateY(-1px);
}

.data-btn-small:active {
  transform: translateY(0);
}

.data-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 600px;
  border-radius: 8px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.data-table thead {
  position: sticky;
  top: 0;
  background: var(--color-panel);
  z-index: 10;
  box-shadow: 0 2px 4px var(--modal-shadow);
}

.data-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 2px solid var(--interactive-border-hover);
  white-space: nowrap;
  user-select: none;
}

.data-table th.sortable {
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.data-table th.sortable:hover {
  background: var(--interactive-bg);
  color: var(--highlight-accent);
}

.data-table th.sorted-asc,
.data-table th.sorted-desc {
  color: var(--highlight-accent);
  background: var(--interactive-bg-hover);
}

.data-table tbody tr {
  transition: background 0.15s;
}

.data-table tbody tr:hover {
  background: var(--interactive-bg);
}

.data-table tbody tr.no-location {
  opacity: 0.7;
}

.data-table td {
  padding: 10px 12px;
  color: var(--color-text);
  border-bottom: 1px solid var(--interactive-bg);
}

.data-table .poi-title {
  font-weight: 500;
  color: var(--color-accent);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table .poi-desc {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-muted);
}

.data-table .poi-category {
  color: var(--color-text-strong);
  font-size: 0.9em;
}

.data-table .poi-coord {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--color-text);
}

.data-table .poi-time {
  font-size: 0.9em;
  color: var(--color-muted);
}

.data-table .poi-media {
  text-align: center;
}

.media-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--interactive-shadow);
  border: 1px solid var(--interactive-border-hover);
  border-radius: 12px;
  font-size: 0.85em;
  color: var(--color-accent);
}

.data-table-footer {
  padding: 12px;
  text-align: right;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0 0 8px 8px;
  font-size: 0.9em;
  color: var(--color-muted);
}

.data-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-muted);
  font-style: italic;
}

/* --- Data Tab Custom Layout --- */
.data-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 8px;
  overflow-x: hidden;
}
.data-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.data-section {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 12px 16px 12px;
  box-shadow: 0 6px 16px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.data-label {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* Section info icon - help tooltip trigger */
.section-info-icon {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  opacity: 0.6;
  cursor: help;
  transition: color 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.section-info-icon:hover {
  color: var(--color-accent);
  opacity: 1;
}

/* Light mode section info icon */
[data-theme="light"] .section-info-icon {
  color: var(--color-text-secondary);
}

[data-theme="light"] .section-info-icon:hover {
  color: var(--color-accent);
}

.data-upload-row, .data-connector-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.data-upload-row {
  position: relative;
}
.data-upload-row--buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
#data-file-upload {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.data-upload-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: 0 2px 8px var(--shadow-soft);
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.data-upload-btn:hover,
.data-upload-btn:focus {
  background: var(--interactive-shadow);
  border-color: var(--interactive-border-active);
  color: var(--color-white);
}
.data-input {
  flex: 1 1 140px;
  min-width: 100px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 0.9rem;
  box-sizing: border-box;
}
.data-field-desc {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-top: 2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.data-mapping-wizard {
  min-height: 48px;
  background: var(--color-panel);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  color: var(--color-text);
  font-size: 0.98rem;
}
.data-preview-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.data-table-preview {
  flex: 2 1 320px;
  min-width: 0;
  background: var(--color-panel);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 0.97rem;
  color: var(--color-text);
}
.data-map-preview {
  flex: 1 1 180px;
  min-width: 0;
  background: var(--color-panel);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.data-import-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-import-options label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}

.data-import-options label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
}
.data-sync-strategy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.data-connector-row {
  margin-bottom: 8px;
}
.data-connector-status-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
}
.data-connector-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--surface-elevated);
  color: var(--text-inverse);
  border: 1px solid var(--color-border);
}
.data-connector-meta {
  color: var(--color-muted);
  font-size: 0.92rem;
}
.data-json-preview-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.data-json-preview {
  width: 100%;
  min-height: 120px;
  background: var(--surface-muted);
  color: var(--text-primary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-family: 'Fira Mono', 'Consolas', monospace;
  font-size: 0.98rem;
  padding: 10px 12px;
  resize: vertical;
}

/* --- Media Tab Custom Layout --- */
.media-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.media-fields-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 12px;
}
.media-field {
  background: linear-gradient(150deg, var(--surface-gradient-start) 0%, var(--surface-gradient-end) 100%);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px 16px 16px 16px;
  box-shadow: 0 10px 24px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.media-label {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  font-size: 1.05rem;
}
.media-thumb-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.media-thumb-upload input[type="file"] {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 100%;
}
.media-thumb-upload .media-upload-btn {
  flex-shrink: 0;
}
.media-upload-input {
  appearance: none;
  background: linear-gradient(135deg, rgba(90, 139, 255, 0.15), rgba(40, 56, 126, 0.4));
  border: 1px solid var(--interactive-border);
  border-radius: 10px;
  padding: 8px 16px;
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.media-upload-input:hover,
.media-upload-input:focus-visible {
  border-color: var(--interactive-border-active);
  box-shadow: 0 0 0 2px rgba(90, 139, 255, 0.3);
}
.media-hero-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.media-hero-preview {
  position: relative; /* For overlay delete button */
  min-height: 140px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: var(--surface-muted);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--color-text-muted);
  overflow: hidden;
  flex-direction: column;
  position: relative;
  gap: 12px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.media-hero-preview.has-hero-image {
  background-color: transparent;
}
.media-hero-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.media-hero-preview span {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.hero-preview-actions {
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-preview-actions p {
  margin: 0;
  color: var(--color-text-secondary);
}
.media-video-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.media-video-actions .media-upload-btn {
  flex: 1;
}
.splash-video-preview {
  position: relative;
  margin-top: 12px;
  min-height: 120px;
  border-radius: 12px;
  background: var(--surface-muted);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: var(--color-text-muted);
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}
.splash-video-preview iframe {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  border: none;
}
.media-thumb-img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid var(--color-accent);
  background: var(--surface-elevated);
  box-shadow: 0 4px 16px var(--interactive-bg);
  flex-shrink: 0;
}
.media-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 1rem;
}
.media-or {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.92rem;
  margin: 6px 0 2px 0;
}
.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.media-gallery-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--color-accent);
  background: var(--surface-elevated);
  box-shadow: 0 2px 8px var(--interactive-bg);
  position: relative;
}
.media-gallery-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
  z-index: 2;
}
.media-gallery-remove:hover,
.media-gallery-remove:focus {
  opacity: 1;
  background: var(--color-danger, #ef4444);
  transform: scale(1.1);
}
.media-upload-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--surface-card);
  color: var(--color-text);
  box-shadow: 0 4px 12px var(--shadow-soft);
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.media-upload-btn:hover,
.media-upload-btn:focus {
  background: var(--interactive-shadow);
  border-color: var(--interactive-border-active);
  color: var(--text-inverse);
}
.media-upload-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-secondary);
  box-shadow: none;
}

/* Danger/delete variant for media buttons */
.media-upload-btn--danger {
  background: transparent;
  border-color: var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
  box-shadow: none;
}
.media-upload-btn--danger:hover,
.media-upload-btn--danger:focus {
  background: var(--color-danger, #ef4444);
  border-color: var(--color-danger, #ef4444);
  color: #fff;
}

/* Overlay delete button (top-right corner of media) */
.media-delete-overlay-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
  z-index: 10;
}
.media-delete-overlay-btn:hover,
.media-delete-overlay-btn:focus {
  opacity: 1;
  background: var(--color-danger, #ef4444);
  transform: scale(1.1);
}
.media-delete-overlay-btn.hidden {
  display: none;
}

/* Smaller variant for thumbnail */
.media-delete-overlay-btn--small {
  width: 22px;
  height: 22px;
  font-size: 11px;
  top: 4px;
  right: 4px;
}

/* Hide utility for dynamically shown buttons */
.media-upload-btn.hidden {
  display: none;
}
.media-field-desc {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin-top: 2px;
}

/* ---------- POI Media Upload Styles ---------- */

/* Media input panel (appears below media buttons) */
.poi-media-input-panel {
  margin-top: 16px;
  padding: 16px;
  background: var(--color-panel-glass);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  animation: slideDown 0.25s ease-out;
}

.poi-media-input-panel.poi-media-link-only {
  margin-top: 10px;
  padding: 12px 14px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.poi-media-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}

.poi-media-input-close {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.poi-media-input-close:hover {
  background: var(--interactive-hover);
  color: var(--color-text);
}

.poi-media-input-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.poi-media-input-panel.poi-media-link-only .poi-media-input-body {
  gap: 8px;
}

.poi-media-input-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.poi-media-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poi-media-input-panel.poi-media-link-only .poi-media-input-group {
  gap: 4px;
}

.poi-media-input-group-file {
  max-width: 240px;
}

.poi-media-input-group-url {
  flex: 1 1 260px;
  min-width: 200px;
}

.poi-media-input-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

.poi-media-input-group input[type="file"] {
  font-size: 0.875rem;
  padding: 8px;
  background: var(--interactive-bg);
  border: 1px solid var(--interactive-border);
  border-radius: 6px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.poi-media-input-group input[type="file"]:hover {
  border-color: var(--interactive-border-active);
  background: var(--interactive-hover);
}

.poi-media-input-group input[type="url"] {
  padding: 10px 12px;
  background: var(--interactive-bg);
  border: 1px solid var(--interactive-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.poi-media-input-group input[type="url"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.1);
}

.poi-media-input-error {
  color: var(--color-error, #ff5252);
  font-size: 0.75rem;
  min-height: 12px;
}

.poi-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.poi-media-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--interactive-bg);
  border: 1px solid var(--interactive-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.poi-media-preview-item:hover {
  border-color: var(--interactive-border-active);
  box-shadow: 0 2px 8px var(--interactive-shadow);
}

.poi-media-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poi-media-empty {
  padding: 12px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.poi-media-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poi-media-icon-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  transform-origin: center;
  transition: color 0.2s, transform 0.2s;
}

.poi-media-icon-btn:hover {
  color: var(--highlight-accent);
  transform: scale(1.1);
}

.poi-media-icon-btn:active {
  transform: scale(0.95);
}

.poi-media-remove-btn:hover {
  background: var(--highlight-red) !important;
  transform: scale(1.1);
}

/* ---------- POI Chip Drag-and-Drop ---------- */
.text-chip--poi.dragging {
  opacity: 0.5;
  background: var(--overlay-bg) !important;
  box-shadow: 0 2px 12px var(--overlay-shadow);
}
.poi-chip-drop-indicator {
  pointer-events: none;
  margin: 0 2px;
}
/* ---------- POI Chip Contextual Menu ---------- */
.poi-chip-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px var(--modal-shadow);
  padding: 6px 0;
  min-width: 120px;
  z-index: 10000;
}
.poi-chip-menu button {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.97em;
  padding: 8px 18px 8px 32px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  position: relative;
}
.poi-chip-menu button i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  opacity: 0.85;
}
.poi-chip-menu button:hover {
  background: var(--interactive-bg-active);
  color: var(--color-white);
}

/* ---------- Inline POI Location Input ---------- */
.poi-inline-input {
  margin-left: 6px;
  width: 180px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  outline: none;
  background: var(--color-panel);
  font: inherit;
  color: inherit;
  padding: 4px 8px;
  transition: border-color 0.2s ease;
}

.poi-inline-input:focus {
  border-color: var(--color-accent);
}

.poi-inline-input.loading {
  border-color: rgb(215, 107, 0);
}

.poi-inline-input.success {
  border-color: rgb(92, 225, 120);
}

.poi-inline-input.error {
  border-color: rgb(255, 107, 107);
}

/* ---------- Inline POI Location Results Dropdown ---------- */
.inline-poi-location-results {
  position: absolute;
  z-index: 9999;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  margin-top: 2px;
  min-width: 220px;
}

.inline-poi-location-result {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.98em;
  border-bottom: 1px solid var(--color-divider);
}

.inline-poi-location-result:last-child {
  border-bottom: none;
}

.inline-poi-location-result:hover {
  background: var(--interactive-bg);
}

/* ---------- Time Picker Popup ---------- */
.time-picker-popup {
  position: absolute;
  z-index: 9999;
  background: var(--surface-3, #111621);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
  width: 220px;
}

/* Time inline input - base styles for chip and popup */
.time-inline-input {
  width: 140px;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* Override width when inside popup */
.time-picker-popup .time-inline-input {
  width: 100%;
}

.time-picker-popup__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.time-picker-popup__actions button {
  padding: 4px 10px;
}

/* Motion tokens for consistent, XR-safe animations */
:root {
  --motion-fast: 260ms;
  --motion-default: 320ms;
  --motion-slow: 400ms;
  --ease-premium: cubic-bezier(0.33, 0, 0.17, 1);
}

@media (max-width: 700px) {
  :root {
    --poi-modal-max-width: 99vw;
    --poi-modal-pad: 6px 2vw 8px 2vw;
    --poi-modal-radius: 10px;
  }
  #poi-modal .modal-content .modal-header {
    margin-top: 8vw;
  }
  .poi-field, .poi-field--wide {
    padding: 6px 4px !important;
    font-size: 0.97em !important;
  }
  #poi-modal .modal-header {
    font-size: 1em !important;
    padding-bottom: 2px !important;
  }
  .poi-actions { --poi-direction: column; --poi-gap: 6px; --poi-align: stretch; }
  
  #poi-modal .poi-form {
    margin-top: 36px;
  }
}
/* ---------- Inline asset chips (look like text) ---------- */
.asset-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background: var(--color-accent-alpha); color: var(--color-white);
  font-size:0.85rem; line-height:1.3; cursor:pointer; user-select:none;
  transition: background .2s, box-shadow .2s;
}
.asset-chip:hover { background: var(--interactive-bg-active); box-shadow: 0 0 0 2px var(--focus-ring-strong); }
.asset-chip i { font-size:1rem; line-height:1; }
.asset-chip[data-kind="image"]    i { color: var(--color-chip-image); }
.asset-chip[data-kind="video"]    i { color: var(--color-chip-video); }
.asset-chip[data-kind="sound"]    i { color: var(--color-chip-sound); }
.asset-chip[data-kind="document"] i { color: var(--color-chip-document); }
.asset-chip[data-kind="model"]    i { color: var(--color-chip-model); }
.asset-chip[data-kind="link"]     i { color: var(--color-chip-link); }

/* ---------- Caret-anchored slash command palette ---------- */
.slash-menu {
  position:absolute; min-width:220px; background: var(--modal-bg);
  border: 1px solid var(--color-border); border-radius:10px;
  box-shadow: 0 8px 24px var(--modal-shadow); padding:6px 0; z-index:3000; display:none;
}
.slash-menu.visible { display:block; }
.slash-menu-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; font-size:.92rem; }
.slash-menu-item i { font-size:1rem; opacity:.9; }
.slash-menu-item:hover, .slash-menu-item.active { background: var(--color-accent-alpha); color: var(--color-white); }

/* (Optional) crisper Leaflet divIcons if you later render POI pins via L.divIcon */
.mixx-pin-wrapper { background:transparent; }
.leaflet-pin i { font-size:20px; color: var(--color-accent); filter: drop-shadow(0 1px 1px var(--color-shadow-dark)); }

/* Mixx AI State Glows - Consistent color system
   - Idle/Dormant: White glow (subtle)
   - Listening: Light Green glow + scale up
   - Thinking: Dark Blue glow + scale up
   - Speaking: Light Blue glow + scale up
   - Error/Offline: Red glow + scale up

   When active, button scales to 2x size to "move toward" user
*/

/* Listening - Green glow with pulse */
.mode-selector.ai-listening {
  box-shadow: 0 0 0 12px rgba(134, 239, 172, 0.25), 0 0 30px rgba(134, 239, 172, 0.4), 0 0 60px rgba(134, 239, 172, 0.2);
  background: color-mix(in srgb, var(--interactive-bg-active) 80%, transparent 20%);
  transform: scale(2);
  z-index: 10100; /* Above all page elements including modals */
  animation: modeSelectorPulseGreen 1.5s ease-in-out infinite;
}

/* Thinking - Dark blue glow with pulse */
.mode-selector.ai-thinking {
  box-shadow: 0 0 0 12px rgba(59, 130, 246, 0.25), 0 0 30px rgba(59, 130, 246, 0.4), 0 0 60px rgba(59, 130, 246, 0.2);
  background: color-mix(in srgb, var(--interactive-bg-active) 80%, transparent 20%);
  transform: scale(2);
  z-index: 10100; /* Above all page elements including modals */
  animation: modeSelectorPulseBlue 1.2s ease-in-out infinite;
}

/* Speaking - Light blue glow with pulse */
.mode-selector.ai-speaking {
  box-shadow: 0 0 0 12px rgba(147, 197, 253, 0.25), 0 0 30px rgba(147, 197, 253, 0.4), 0 0 60px rgba(147, 197, 253, 0.2);
  background: color-mix(in srgb, var(--interactive-bg-active) 80%, transparent 20%);
  transform: scale(2);
  z-index: 10100; /* Above all page elements including modals */
  animation: modeSelectorPulseLightBlue 1s ease-in-out infinite;
}

/* Pulse animations for each state */
@keyframes modeSelectorPulseGreen {
  0%, 100% {
    box-shadow: 0 0 0 12px rgba(134, 239, 172, 0.25), 0 0 30px rgba(134, 239, 172, 0.4), 0 0 60px rgba(134, 239, 172, 0.2);
    transform: scale(2);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(134, 239, 172, 0.35), 0 0 40px rgba(134, 239, 172, 0.5), 0 0 80px rgba(134, 239, 172, 0.3);
    transform: scale(2.05);
  }
}

@keyframes modeSelectorPulseBlue {
  0%, 100% {
    box-shadow: 0 0 0 12px rgba(59, 130, 246, 0.25), 0 0 30px rgba(59, 130, 246, 0.4), 0 0 60px rgba(59, 130, 246, 0.2);
    transform: scale(2);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(59, 130, 246, 0.35), 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.3);
    transform: scale(2.05);
  }
}

@keyframes modeSelectorPulseLightBlue {
  0%, 100% {
    box-shadow: 0 0 0 12px rgba(147, 197, 253, 0.25), 0 0 30px rgba(147, 197, 253, 0.4), 0 0 60px rgba(147, 197, 253, 0.2);
    transform: scale(2);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(147, 197, 253, 0.35), 0 0 40px rgba(147, 197, 253, 0.5), 0 0 80px rgba(147, 197, 253, 0.3);
    transform: scale(2.05);
  }
}

.mixx-ai-mic-btn.is-listening {
  box-shadow: 0 0 0 12px rgba(134, 239, 172, 0.2);
  background: rgba(134, 239, 172, 0.15);
  border-color: rgba(134, 239, 172, 0.5);
}

/* Main Elements Scale-In Animation (spec #3) - Sequential Cascade */

/* Step 2: Three input panels scale up from center (at 2 seconds) */
body:not(.app-ready) #textWorkspace,
body:not(.app-ready) #map2dPanel,
body:not(.app-ready) #map3dPanel {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
}

body.app-ready #textWorkspace,
body.app-ready #map2dPanel,
body.app-ready #map3dPanel {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-premium), transform 400ms var(--ease-premium);
  transition-delay: 2000ms; /* Start at 2 seconds */
}

/* Step 3: Mixx AI button and view switcher fade in (1 second duration) */
body:not(.app-ready) .mode-selector,
body:not(.app-ready) .view-switcher-row {
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center;
}

body.app-ready .mode-selector,
body.app-ready .view-switcher-row {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1000ms var(--ease-premium), transform 1000ms var(--ease-premium);
  transition-delay: 2400ms; /* Start after panels complete (2000ms + 400ms) */
}

/* Autosave pill */
.autosave-status {
  position: fixed; 
  right: 14px; 
  bottom: 14px;
  z-index: 3000;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--color-text);
  background: var(--surface-elevated);
  border: 1px solid var(--color-border);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.autosave-status.show {
  opacity: 1;
  transform: translateY(0);
}

body.e2e-test .project-item,
body.e2e-test .project-item[style*="display:none"],
body.e2e-test .projects-list li {
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.e2e-test .modal,
body.e2e-test .modal.hidden {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.e2e-test .sidebar,
body.e2e-test #sidebar-projects {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.e2e-test .sidebar.collapsed {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.e2e-test #sidebar-projects.hidden {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.e2e-test.current-tab-active #sidebar-projects,
body.e2e-test.current-tab-active #sidebar-projects.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* =========================================================
   INLINE SMART CHIPS (Bootstrap Icons, Unified Look)
   ========================================================= */
.text-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--color-text-strong);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.text-chip i {
  font-size: 1rem;
  line-height: 1;
}
.text-chip--poi { color: var(--color-accent); }
.text-chip--poi i { color: var(--color-accent); }

/* Blue marker indicator for POI chips */
.poi-chip-marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #5a8bff;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* ---------- Timeline POI States ---------- */
/* These classes are added by js/poi.js:highlightPOIsAndChips() */
/* Visibility is handled by js/timelineFilter.js, but we add visual feedback here */
.text-chip--poi.poi-active {
  /* Active POI in timeline - fully visible */
  opacity: 1;
}
.text-chip--poi.poi-inactive {
  /* Inactive POI in timeline - will be hidden by timelineFilter.js */
  opacity: 0.4;
  filter: grayscale(50%);
}
.text-chip--poi.poi-undated {
  /* Undated POI - shown but dimmed */
  opacity: 0.7;
}

.text-chip--image i { color: var(--color-chip-image); }
.text-chip--video i { color: var(--color-chip-video); }
.text-chip--time i { color: var(--color-chip-time); }
.text-chip--model i { color: var(--color-chip-model); }
.text-chip--link i { color: var(--color-chip-link); }

/* ---------- Device-Adaptive Chip Rendering ---------- */
/* Tablet and small desktop - slightly smaller chips */
@media (max-width: 1024px) {
  .text-chip {
    font-size: 0.82rem;
    padding: 0 3px;
    gap: 3px;
  }
  .text-chip i {
    font-size: 0.9rem;
  }
}

/* Mobile - compact chips with icon-only option for very small screens */
@media (max-width: 768px) {
  .text-chip {
    font-size: 0.8rem;
    padding: 2px 6px;
    gap: 3px;
  }
  .text-chip i {
    font-size: 0.85rem;
  }
  /* Hide long addresses in POI preview on mobile */
  .poi-preview-address {
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Smaller preview tooltip on mobile */
  .poi-chip-preview-tooltip {
    max-width: 260px;
    padding: 10px 12px;
  }
}

/* Very small screens (watch-like) - icon-only chips */
@media (max-width: 360px) {
  .text-chip {
    font-size: 0.75rem;
    padding: 2px 4px;
    gap: 2px;
  }
  /* Show only icon on very small screens for media chips */
  .text-chip--media:not(.text-chip--expanded) {
    max-width: 32px;
    overflow: hidden;
  }
  .text-chip--media:not(.text-chip--expanded) i {
    margin-right: 0;
  }
  /* POI chips show abbreviated text */
  .text-chip--poi {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Minimal preview on very small screens */
  .poi-chip-preview-tooltip {
    max-width: 200px;
    padding: 8px;
  }
  .poi-preview-description,
  .poi-preview-coords {
    display: none;
  }
}

/* High DPI displays - sharper icons */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .text-chip i {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .text-chip {
    /* Larger touch targets on touch devices */
    min-height: 32px;
    padding: 4px 8px;
  }
  .poi-chip-edit-btn {
    /* Larger edit button on touch */
    min-width: 48px;
    min-height: 36px;
    font-size: 0.9rem;
  }
}

/* ---------- Note Chips ---------- */
.text-chip--note {
  background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
  color: #5d4037;
  border: 1px solid #fdd835;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.text-chip--note i {
  color: #f57f17;
  font-size: 0.9rem;
}

.text-chip--note .note-chip-label {
  font-weight: 500;
  font-size: 0.9rem;
}

.text-chip--note.note-chip-editing {
  background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
  padding: 4px 6px;
}

.note-chip-editor {
  display: inline-block;
  min-width: 120px;
  max-width: 300px;
  padding: 2px 6px;
  border-bottom: 1px solid #fdd835;
  outline: none;
  font-size: 0.9rem;
  color: #5d4037;
}

.note-chip-editor:empty::before {
  content: attr(data-placeholder);
  color: #9e9e9e;
  font-style: italic;
}

.note-chip-editor:focus {
  border-bottom-color: #f57f17;
}

/* Text Panel Placeholder */
#textPanel[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--color-placeholder);
  font-style: italic;
  opacity: 0.8;
  pointer-events: none;
  display: block;
}

#textPanel[data-placeholder]:empty:focus::before {
  opacity: 0.6;
}

#textPanel[data-placeholder]:empty {
  min-height: 140px;
}

/* Note Preview Bubble */
.note-preview-bubble {
  position: absolute;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  min-width: 200px;
  max-width: 320px;
  z-index: 10000;
  animation: notePreviewFadeIn 0.2s ease-out;
}

@keyframes notePreviewFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-preview-content {
  font-size: 0.9rem;
  color: #424242;
  line-height: 1.5;
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-preview-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}

.note-btn {
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #616161;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.note-btn:hover {
  background: #f5f5f5;
  border-color: #bdbdbd;
  color: #424242;
}

.note-btn-delete:hover {
  background: #ffebee;
  border-color: #ef5350;
  color: #d32f2f;
}

.text-chip:hover {
  background: var(--interactive-bg);
  box-shadow: 0 6px 14px var(--interactive-shadow);
}

.text-chip--note:hover {
  background: linear-gradient(135deg, #fff59d 0%, #fff176 100%);
  box-shadow: 0 4px 12px rgba(245, 127, 23, 0.25);
}
.text-chip.chip-active {
  background: var(--interactive-bg-hover);
  box-shadow: 0 0 0 2px var(--focus-ring-strong);
}

/* ---------- Phase Chips ---------- */
.text-chip--phase {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1565c0;
  border: 1px solid #64b5f6;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.text-chip--phase i {
  color: #1976d2;
  font-size: 0.95rem;
}

.text-chip--phase .phase-chip-title {
  font-weight: 500;
  font-size: 0.9rem;
}

.text-chip--phase:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
  transform: translateY(-1px);
}

.text-chip--phase:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.5);
}

.text-chip--phase:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.25);
}

/* Dark mode phase chips */
@media (prefers-color-scheme: dark) {
  .text-chip--phase {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    color: #90caf9;
    border-color: #5c6bc0;
  }

  .text-chip--phase i {
    color: #82b1ff;
  }

  .text-chip--phase:hover {
    background: linear-gradient(135deg, #283593 0%, #3949ab 100%);
    box-shadow: 0 4px 12px rgba(130, 177, 255, 0.3);
  }
}

/* Explicit dark theme support */
[data-theme="dark"] .text-chip--phase {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  color: #90caf9;
  border-color: #5c6bc0;
}

[data-theme="dark"] .text-chip--phase i {
  color: #82b1ff;
}

[data-theme="dark"] .text-chip--phase:hover {
  background: linear-gradient(135deg, #283593 0%, #3949ab 100%);
  box-shadow: 0 4px 12px rgba(130, 177, 255, 0.3);
}

/* ---------- Phase Panel ---------- */
.phase-panel {
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.phase-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  cursor: pointer;
}

.phase-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text, #fff);
}

.phase-panel-title i {
  color: #64b5f6;
}

.phase-panel-toggle {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.phase-panel-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text, #fff);
}

.phase-panel-body {
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.phase-panel-collapsed .phase-panel-body {
  display: none;
}

.phase-panel-empty {
  text-align: center;
  padding: 16px;
  color: var(--color-text-muted, #888);
  font-size: 0.85rem;
}

.phase-panel-empty p {
  margin: 0 0 8px 0;
}

.phase-panel-hint {
  font-size: 0.8rem;
  opacity: 0.8;
}

.phase-panel-hint code {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.phase-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phase-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.phase-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(100, 181, 246, 0.3);
}

.phase-item:focus {
  outline: none;
  border-color: #64b5f6;
  box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
}

.phase-item-dragging {
  opacity: 0.5;
  border-style: dashed;
}

.phase-item-drag-over {
  border-color: #64b5f6;
  background: rgba(100, 181, 246, 0.1);
}

.phase-item-drag {
  color: var(--color-text-muted, #666);
  cursor: grab;
  padding: 2px;
}

.phase-item-drag:active {
  cursor: grabbing;
}

.phase-item-content {
  flex: 1;
  min-width: 0;
}

.phase-item-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-item-rename-input {
  width: 100%;
  padding: 2px 6px;
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #64b5f6;
  border-radius: 4px;
  color: var(--color-text, #fff);
  outline: none;
}

.phase-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.phase-item:hover .phase-item-actions,
.phase-item:focus-within .phase-item-actions {
  opacity: 1;
}

.phase-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.phase-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text, #fff);
}

.phase-btn-jump:hover {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.phase-btn-recapture:hover {
  background: rgba(100, 181, 246, 0.2);
  color: #64b5f6;
}

.phase-btn-rename:hover {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.phase-btn-delete:hover {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

/* Light mode phase panel */
@media (prefers-color-scheme: light) {
  .phase-panel {
    background: #fff;
    border-color: #e0e0e0;
  }

  .phase-panel-header {
    background: #f5f5f5;
    border-bottom-color: #e0e0e0;
  }

  .phase-panel-title {
    color: #333;
  }

  .phase-item {
    background: #f9f9f9;
  }

  .phase-item:hover {
    background: #f0f0f0;
  }

  .phase-item-title {
    color: #333;
  }

  .phase-btn {
    color: #666;
  }

  .phase-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
  }
}

/* ---------- Inline POI Input ---------- */
.poi-inline-input {
  display: inline-block;
  min-width: 200px;
  max-width: 400px;
  padding: 4px 8px;
  margin-left: 4px;
  border-radius: 4px;
  border: 1px solid var(--interactive-border-hover);
  background: var(--interactive-bg);
  color: var(--color-text);
  outline: none;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.poi-inline-input:focus {
  border-color: var(--interactive-border-active);
  box-shadow: 0 0 8px var(--interactive-shadow);
}

.poi-inline-input::placeholder {
  color: var(--color-text-muted);
}

/* ---------- Inline Time Input ---------- */
.time-inline-input {
  display: inline-block;
  padding: 4px 8px;
  margin-left: 4px;
  border-radius: 4px;
  border: 1px solid var(--time-input-border);
  background: var(--time-input-bg);
  color: var(--color-text);
  outline: none;
  font-size: 0.9rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.time-inline-input:focus {
  border-color: var(--time-input-border-focus);
  box-shadow: 0 0 8px var(--time-input-shadow);
}

/* Style the datetime-local input picker */
.time-inline-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}


/* --- POI Selection Highlight --- */

.poi-list-item:active {
  overflow: hidden;
}
.poi-list-item:active::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  background: var(--interactive-bg-active);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: ripple 0.5s linear;
  pointer-events: none;
}
@keyframes ripple {
  0% { width: 0; height: 0; opacity: 0.6; }
  80% { width: 120px; height: 120px; opacity: 0.2; }
  100% { width: 120px; height: 120px; opacity: 0; }
}

.leaflet-marker-icon.poi-selected {
  animation: markerPulse 0.5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px 2px var(--marker-selected-shadow);
}
@keyframes markerPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--marker-pulse-shadow); }
  60% { transform: scale(1.18); box-shadow: 0 0 24px 8px var(--marker-pulse-shadow); }
  100% { transform: scale(1); box-shadow: 0 0 12px 2px var(--marker-selected-shadow); }
}

/* POI marker highlight from chip hover - repeating pulse animation */
.leaflet-marker-icon.poi-highlighted {
  animation: markerHighlightPulse 1s cubic-bezier(.4,0,.2,1) infinite;
  z-index: 1000 !important;
}
@keyframes markerHighlightPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--marker-pulse-shadow, rgba(59, 130, 246, 0.5));
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 20px 6px var(--marker-pulse-shadow, rgba(59, 130, 246, 0.5));
  }
}

/* Cesium marker highlight (billboard/label) */
.cesium-poi-highlighted {
  filter: drop-shadow(0 0 8px var(--color-accent, #3b82f6)) brightness(1.3);
}

.text-chip--poi.active {
  background: var(--interactive-bg-active);
  color: var(--color-text-strong);
  box-shadow: 0 8px 20px var(--interactive-shadow);
  animation: chipHighlight 0.5s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.text-chip--poi.active i {
  color: var(--color-accent);
}
@keyframes chipHighlight {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  100% {
    box-shadow: 0 8px 20px var(--interactive-shadow);
  }
}

/* POI chip edit button */
.poi-chip-edit-btn {
  position: absolute;
  z-index: 10000;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--color-accent);
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(90, 139, 255, 0.3);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.poi-chip-edit-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.poi-chip-edit-btn:hover {
  background: #4a7bef;
  box-shadow: 0 4px 12px rgba(90, 139, 255, 0.4);
  transform: translateY(-1px);
}

/* POI chip preview tooltip */
.poi-chip-preview-tooltip {
  position: absolute;
  z-index: 10001;
  background: var(--color-bg-panel, rgba(17, 17, 22, 0.95));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-width: 320px;
  min-width: 180px;
  pointer-events: none;
  animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.poi-preview-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-strong, #fff);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.poi-preview-title i {
  color: var(--color-accent, #5a8bff);
}

.poi-preview-address {
  font-size: 0.85rem;
  color: var(--color-text-muted, #a0a0a0);
  margin-bottom: 6px;
  line-height: 1.4;
}

.poi-preview-description {
  font-size: 0.85rem;
  color: var(--color-text, #ccc);
  margin-bottom: 6px;
  line-height: 1.4;
  font-style: italic;
}

.poi-preview-coords {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  font-family: monospace;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

/* ============================================
   POI MAP POPUP - Glassmorphic Style
   ============================================ */

.poi-popup {
  position: relative;
  z-index: 10002;

  /* Glassmorphic effect */
  background: rgba(32, 36, 48, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  /* Border and shadow with accent glow */
  border: 1px solid rgba(90, 139, 255, 0.22);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(90, 139, 255, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Layout */
  min-width: 220px;
  max-width: 320px;
  padding: 16px;

  /* Animation */
  animation: poiPopupFadeIn 0.2s ease-out;
  pointer-events: auto;
}

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

/* Header with title and close button */
.poi-popup__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.poi-popup__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-strong, #fff);
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.poi-popup__title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poi-popup__title i {
  color: var(--color-accent, #5a8bff);
  flex-shrink: 0;
  font-size: 1.1rem;
}

.poi-popup__close {
  background: transparent;
  border: none;
  color: var(--color-muted, #8b8fa3);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.poi-popup__close:hover {
  color: var(--color-text, #e7e7ea);
  background: rgba(255, 255, 255, 0.1);
}

.poi-popup__close:active {
  background: rgba(255, 255, 255, 0.15);
}

/* Category pill badge */
.poi-popup__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(90, 139, 255, 0.15);
  color: var(--color-accent, #5a8bff);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.poi-popup__category i {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Date range */
.poi-popup__date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-muted, #a0a0a0);
  margin-bottom: 10px;
}

.poi-popup__date i {
  color: var(--color-accent, #5a8bff);
  opacity: 0.7;
  font-size: 0.9rem;
}

/* Description text */
.poi-popup__description {
  font-size: 0.85rem;
  color: var(--color-text, #ccc);
  line-height: 1.55;
  margin: 0 0 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* View Details button */
.poi-popup__action {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(140deg, #5a8bff, #7a9fff);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.poi-popup__action:hover {
  box-shadow: 0 4px 18px rgba(90, 139, 255, 0.45);
  transform: translateY(-1px);
}

.poi-popup__action:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(90, 139, 255, 0.3);
}

.poi-popup__action i {
  font-size: 1rem;
}

/* Leaflet popup overrides - remove default styling */
.leaflet-popup.poi-glassmorphic-popup {
  margin-bottom: 20px;
}

.leaflet-popup.poi-glassmorphic-popup .leaflet-popup-content-wrapper {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.leaflet-popup.poi-glassmorphic-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.leaflet-popup.poi-glassmorphic-popup .leaflet-popup-tip-container {
  display: none;
}

/* Light mode adjustments */
[data-theme="light"] .poi-popup {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(90, 139, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(90, 139, 255, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .poi-popup__title {
  color: var(--color-text-strong, #1a1a2e);
}

[data-theme="light"] .poi-popup__close {
  color: #666;
}

[data-theme="light"] .poi-popup__close:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .poi-popup__category {
  background: rgba(90, 139, 255, 0.12);
}

[data-theme="light"] .poi-popup__date {
  color: #666;
}

[data-theme="light"] .poi-popup__description {
  color: #444;
}

/* Enhanced mode glow for POI popup */
[data-animations="on"] .poi-popup,
.enhanced-mode .poi-popup {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

[data-animations="on"] .poi-popup:hover,
.enhanced-mode .poi-popup:hover {
  box-shadow:
    0 0 40px -10px var(--enhance-glow-primary, rgba(102, 126, 234, 0.4)),
    0 0 60px -20px var(--enhance-glow-accent, rgba(118, 75, 226, 0.35)),
    0 8px 32px rgba(90, 139, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* Themed scrollbars for scrollable containers */
.projects-list, .poi-list, .sidebar-content,
.text-panel, .modal-content, .data-table-wrapper,
textarea, .mixx-ai-panel__log, .mobile-chat-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
.projects-list::-webkit-scrollbar,
.poi-list::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar,
.text-panel::-webkit-scrollbar,
.data-table-wrapper::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.mixx-ai-panel__log::-webkit-scrollbar,
.mobile-chat-messages::-webkit-scrollbar {
  width: 10px;
  background: var(--color-scrollbar-track);
}
.projects-list::-webkit-scrollbar-thumb,
.poi-list::-webkit-scrollbar-thumb,
.sidebar-content::-webkit-scrollbar-thumb,
.text-panel::-webkit-scrollbar-thumb,
.data-table-wrapper::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.mixx-ai-panel__log::-webkit-scrollbar-thumb,
.mobile-chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--surface-elevated) 60%, var(--color-accent) 100%);
  border-radius: 8px;
  border: 2px solid var(--color-scrollbar-track);
}
.projects-list::-webkit-scrollbar-thumb:hover,
.poi-list::-webkit-scrollbar-thumb:hover,
.sidebar-content::-webkit-scrollbar-thumb:hover,
.text-panel::-webkit-scrollbar-thumb:hover,
.data-table-wrapper::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
.mixx-ai-panel__log::-webkit-scrollbar-thumb:hover,
.mobile-chat-messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--color-accent) 60%, var(--surface-elevated) 100%);
}
.projects-list::-webkit-scrollbar-track,
.poi-list::-webkit-scrollbar-track,
.sidebar-content::-webkit-scrollbar-track,
.text-panel::-webkit-scrollbar-track,
.data-table-wrapper::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
.mixx-ai-panel__log::-webkit-scrollbar-track,
.mobile-chat-messages::-webkit-scrollbar-track {
  background: var(--color-input-bg);
  border-radius: 8px;
}
/* Category input style for Info tab */
.info-category-input {
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
  flex: 1;
  min-width: 0;
}
.info-category-input:focus {
  border-color: var(--color-accent);
}
.category-input-container {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
/* Ensure QR code in XR modal is centered */
.qr-code-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
  width: 100%;
}

/* Primary buttons (e.g., duplicate confirm) */
.btn-primary {
  background: linear-gradient(140deg, var(--btn-primary-bg-start), var(--btn-primary-bg-end));
  color: var(--btn-primary-text);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  padding: 10px 18px;
  box-shadow: 0 4px 14px var(--btn-primary-shadow);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(140deg, color-mix(in srgb, var(--btn-primary-bg-start) 85%, #ffffff 15%), color-mix(in srgb, var(--btn-primary-bg-end) 85%, #ffffff 15%));
  color: var(--btn-primary-text);
  box-shadow: 0 6px 18px var(--btn-primary-shadow-hover), 0 0 0 3px rgba(90, 139, 255, 0.25);
  transform: translateY(-1px);
  outline: none;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px var(--btn-primary-shadow-active);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Danger button variant */
.btn-danger {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  padding: 10px 18px;
  box-shadow: 0 4px 14px var(--danger-shadow);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.btn-danger:hover,
.btn-danger:focus-visible {
  background: var(--danger-bg-hover);
  color: var(--danger-text);
  box-shadow: 0 6px 18px var(--danger-shadow);
  transform: translateY(-1px);
  outline: none;
}

.btn-danger:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px var(--danger-shadow);
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Red background for delete button in modal */
#delete-confirm.btn-primary {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--danger-shadow);
  transition: background 0.2s, color 0.2s;
}
#delete-confirm.btn-primary:hover, #delete-confirm.btn-primary:focus {
  background: var(--danger-bg-hover);
  color: var(--danger-text);
}
#delete-confirm-modal .modal-footer {
  padding: 18px 0 12px 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 0 0 12px 12px;
}

#delete-confirm-modal .btn-danger {
  background: var(--danger-light-bg);
  color: var(--danger-light-text);
  box-shadow: none;
}
#delete-confirm-modal .btn-danger:hover, #delete-confirm-modal .btn-danger:focus {
  background: var(--danger-light-bg-hover);
  color: var(--danger-light-text-hover);
}
#delete-confirm-ok.btn-danger {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-radius: 6px;
  padding: 10px 22px;
  border: none;
  box-shadow: 0 2px 8px var(--danger-shadow);
  font-weight: 600;
  transition: background 0.2s;
}
#delete-confirm-ok.btn-danger:hover, #delete-confirm-ok.btn-danger:focus {
  background: var(--danger-bg-hover);
}
/* Sidebar current tab container (consolidated) */
#sidebar-current {
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-left: var(--sidebar-current-pad-x, 0);
  padding-right: var(--sidebar-current-pad-x, 0);
  padding-bottom: var(--sidebar-current-pad-bottom, 0);
  margin: var(--sidebar-current-margin, 0);
  width: var(--sidebar-current-width, auto);
  overflow-y: var(--sidebar-current-overflow, visible);
  position: var(--sidebar-current-position, static);
  /* Consolidated from lines 3204, 3356, 3414 */
  --sidebar-current-pad-x: 0;
  --sidebar-current-margin: 0 -18px;
  --sidebar-current-width: calc(100% + 36px);
  --sidebar-current-pad-bottom: 0;
  --sidebar-current-overflow: hidden;
  --sidebar-current-position: relative;
  box-sizing: border-box;
}
/* Project List Styling */
.projects-list {
  list-style: none;
  padding: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: linear-gradient(150deg, var(--modal-gradient-start), var(--modal-gradient-end));
  background-color: var(--modal-bg-solid);
  border: 1px solid var(--modal-border-light);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
.projects-list::-webkit-scrollbar {
  width: 8px;
}
.projects-list::-webkit-scrollbar-track {
  background: transparent;
}
.projects-list::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border-radius: 999px;
}
.project-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 0;
  background: linear-gradient(160deg, var(--project-bg-start), var(--project-bg-end));
  border: 1px solid var(--project-border);
  border-radius: 16px;
  color: var(--project-text);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 220ms ease, border-color 160ms ease, background 180ms ease;
  outline: none;
  min-width: 0;
}
.project-item:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: var(--project-border-hover);
  box-shadow: 0 22px 40px var(--project-shadow);
}
.project-item:focus-visible {
  transform: translateY(-2px) scale(1.01);
  border-color: var(--project-border-hover);
  box-shadow: 0 0 0 2px var(--project-focus-ring), 0 22px 40px var(--project-shadow);
}
.project-item:active {
  transform: translateY(0);
}
.project-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.project-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.project-thumb {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--project-border-hover);
  box-shadow: 0 10px 22px var(--shadow-elevated);
}
.project-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--project-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-item.selected .project-title {
  color: var(--color-white);
}
.project-shared-icon {
  margin-left: 8px;
  color: #667eea;
  font-size: 14px;
  opacity: 0.8;
  vertical-align: middle;
}
.project-item.selected .project-shared-icon {
  color: var(--color-white);
  opacity: 1;
}
.project-status {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--status-default-bg);
  border: 1px solid var(--status-default-border);
  color: var(--status-default-text);
}
.project-status--published {
  background: var(--status-published-bg);
  border-color: var(--status-published-border);
  color: var(--status-published-text);
}
.project-status--draft {
  background: var(--status-draft-bg);
  border-color: var(--status-draft-border);
  color: var(--status-draft-text);
}
.project-status--archived {
  background: var(--status-archived-bg);
  border-color: var(--status-archived-border);
  color: var(--status-archived-text);
}
.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}
.project-meta-item {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
}
.project-meta-item + .project-meta-item {
  padding-left: 10px;
  border-left: 1px solid var(--modal-border);
}
.project-tags {
  color: var(--text-secondary);
}
.project-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  color: var(--color-accent);
}
.project-item:hover .project-actions,
.project-item:focus-within .project-actions,
.project-item.selected .project-actions {
  opacity: 1;
  transform: translateX(0);
}
.project-actions .bi {
  font-size: 1.4rem;
  pointer-events: none;
}
@media (max-width: 520px) {
  .project-item {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .project-actions {
    justify-content: flex-end;
  }
}
/* Move Leaflet zoom controls to bottom right */
.leaflet-bottom.leaflet-right {
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;
  z-index: 1000;
}
/* Lock button active state */
.locked {
  background: var(--color-danger) !important;
  color: var(--color-white) !important;
  opacity: 0.85;
  box-shadow: 0 2px 8px var(--danger-shadow);
}
/* Ensures all main panels are the same distance from the bottom of the screen */
.panel-bottom-align {
  margin-bottom: 25px;
}
/* Footer bar flush bottom for subtab panels */
.footer-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  width: calc(100% + 36px); /* Span full width */
  margin-left: -18px; /* Adjust margins */
  margin-right: -18px; /* Adjust margins */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 5px 18px;
  border-top: 1px solid var(--color-border-subtle);
  z-index: 10;
  box-shadow: 0 -2px 8px var(--interactive-bg);
  margin-top: auto;
  background: var(--color-panel);
}

[data-theme="light"] .footer-bar {
  background: var(--color-panel);
  border-top-color: rgba(48, 62, 110, 0.16);
  box-shadow: 0 -6px 16px rgba(33, 42, 78, 0.08);
}

.footer-bar .info-status {
  margin-top: 0;
  margin-right: auto;
}

.footer-bar .btn-save,
.footer-bar .btn-publish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5.4px; /* 10% smaller */
  padding: 2.7px 16.2px; /* 10% smaller */
  border-radius: 5.4px; /* 10% smaller */
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text-strong);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.018em; /* 10% smaller */
  font-size: 90%; /* 10% smaller */
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.footer-bar .btn-save:hover {
  background: var(--interactive-bg-active);
  border-color: var(--interactive-border-active);
}

[data-theme="light"] .footer-bar .btn-save {
  color: var(--color-text-strong);
}

.footer-bar .btn-publish {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
  box-shadow: 0 2px 10px var(--success-shadow);
}

.footer-bar .btn-publish:hover,
.footer-bar .btn-publish:focus {
  background: var(--success-bg-hover);
  border-color: var(--success-border-hover);
  box-shadow: 0 2px 10px var(--success-shadow-hover);
}
body, html, input, button, textarea, select {
  font-family: 'dm-sans', sans-serif;
}

.navbar-brand {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--color-text-strong);
}
/* Ensure navbar-right stays on one row */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  position: relative;
}
/* Show notifications tooltip only on hover */
#notificationsBtn:hover .notifications-tooltip {
  display: block !important;
}
/* MIXX Platform - Reference Layout Styling */
:root {
  --color-bg: #0c0c0d;
  --color-panel: #111116;
  --color-sidebar: #18181b;
  --color-navbar-bg-start: #181a23;
  --color-navbar-bg-end: #23253a;
  --color-navicon-bg: #23253a;
  --color-navicon-hover: #2f3146;
  --color-profile-chip-bg-start: #23253a;
  --color-profile-chip-bg-end: #7a8bff;
  --color-profile-chip-text: #ffffff;
  --color-profile-menu: rgba(18, 19, 32, 0.98);
  --color-profile-menu-border: rgba(255, 255, 255, 0.06);
  --color-tooltip-bg: #23253a;
  --color-tooltip-border: rgba(255, 255, 255, 0.08);
  --color-accent: #5a8bff;
  --color-text: #e7e7ea;
  --color-text-strong: #eaf0ff;
  --color-text-secondary: #b3b3c0;
  --color-muted: #b3b3c0;
  --color-border: #22222a;
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-danger: #e66;
  --color-placeholder: rgba(231, 231, 234, 0.58);
  --color-input-bg: rgba(24, 24, 32, 0.6);
  --color-input-border: rgba(255, 255, 255, 0.08);
  --color-scrollbar-thumb: rgba(90, 139, 255, 0.35);
  --color-scrollbar-track: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.28);
  --shadow-elevated: 0 8px 32px rgba(90, 139, 255, 0.18);
  
  /* Surface colors */
  --surface-elevated: #23253a;
  --surface-muted: #18181f;
  --surface-gradient-start: #18181f;
  --surface-gradient-end: #15151c;
  --surface-card: #202027;
  
  /* Text colors */
  --text-inverse: #ffffff;
  --text-primary: #e7e7ea;
  --text-secondary: #b3b3c0;
  --text-muted: rgba(231, 231, 234, 0.5);
  
  /* Asset chip colors */
  --color-chip-image: #86c5ff;
  --color-chip-video: #ff7676;
  --color-chip-sound: #ffa4a4;
  --color-chip-document: #b0c0ff;
  --color-chip-model: #4ef2a8;
  --color-chip-link: #aabaff;
  --color-chip-time: #ffd46b;
  
  /* UI colors */
  --color-white: #ffffff;
  --color-accent-alpha: rgba(90, 139, 255, 0.18);
  --color-shadow-dark: rgba(0, 0, 0, 0.35);
  
  /* Notification colors */
  --notification-success-bg: #d1fae5;
  --notification-success-text: #065f46;
  --notification-success-border: #10b981;
  --notification-error-bg: #fee2e2;
  --notification-error-text: #991b1b;
  --notification-error-border: #ef4444;
  --notification-info-bg: #dbeafe;
  --notification-info-text: #1e40af;
  --notification-info-border: #3b82f6;
  
  /* Status badge colors */
  --status-default-bg: rgba(90, 139, 255, 0.16);
  --status-default-border: rgba(118, 137, 255, 0.32);
  --status-default-text: rgba(157, 190, 255, 0.85);
  --status-published-bg: rgba(46, 178, 133, 0.18);
  --status-published-border: rgba(46, 178, 133, 0.32);
  --status-published-text: rgba(142, 232, 198, 0.9);
  --status-draft-bg: rgba(255, 193, 79, 0.18);
  --status-draft-border: rgba(255, 193, 79, 0.32);
  --status-draft-text: rgba(255, 218, 162, 0.88);
  --status-archived-bg: rgba(112, 115, 134, 0.2);
  --status-archived-border: rgba(112, 115, 134, 0.32);
  --status-archived-text: rgba(196, 199, 215, 0.85);
  
  /* Sync status badge colors */
  --sync-badge-bg-start: rgba(142, 170, 255, 0.95);
  --sync-badge-bg-end: rgba(90, 139, 255, 0.85);
  --sync-badge-text: #ffffff;
  --sync-badge-shadow: rgba(90, 139, 255, 0.3);
  --sync-badge-shadow-hover: rgba(90, 139, 255, 0.38);
  --sync-badge-shadow-active: rgba(90, 139, 255, 0.28);
  
  /* XR interface colors */
  --xr-panel-shadow: rgba(32, 34, 59, 0.35);
  --xr-panel-shadow-elevated: rgba(74, 110, 255, 0.35);
  --xr-hud-bg: rgba(90, 139, 255, 0.92);
  --xr-hud-text: #ffffff;
  
  /* Interactive element colors */
  --interactive-bg: rgba(90, 139, 255, 0.08);
  --interactive-bg-hover: rgba(90, 139, 255, 0.12);
  --interactive-bg-active: rgba(90, 139, 255, 0.18);
  --interactive-border: rgba(90, 139, 255, 0.18);
  --interactive-border-hover: rgba(90, 139, 255, 0.3);
  --interactive-border-active: rgba(90, 139, 255, 0.4);
  --interactive-shadow: rgba(90, 139, 255, 0.2);
  --focus-ring: rgba(90, 139, 255, 0.18);
  --focus-ring-strong: rgba(90, 139, 255, 0.25);
  
  /* Marker and map element colors */
  --marker-pulse-shadow: rgba(122, 139, 255, 0.53);
  --marker-selected-shadow: rgba(122, 139, 255, 0.53);
  
  /* Timeline component colors */
  --timeline-bg: linear-gradient(180deg, rgba(22, 23, 38, 0.72) 0%, rgba(12, 12, 18, 0.4) 100%);
  --timeline-border: rgba(122, 139, 255, 0.16);
  --timeline-shadow: inset 0 0 0 1px rgba(17, 18, 34, 0.5), 0 10px 18px rgba(10, 12, 26, 0.35);
  --timeline-track-bg: linear-gradient(180deg, rgba(33, 37, 62, 0.8) 0%, rgba(21, 22, 38, 0.62) 55%, rgba(12, 12, 20, 0.4) 100%);
  --timeline-scrub-bg: linear-gradient(90deg, rgba(28, 30, 52, 0.9) 0%, rgba(20, 22, 38, 0.7) 100%);
  --timeline-scrub-border: rgba(122, 139, 255, 0.18);
  --timeline-glow: rgba(90, 139, 255, 0.45);
  --timeline-glow-active: rgba(90, 139, 255, 0.65);
  --timeline-glow-secondary: rgba(90, 139, 255, 0.35);
  
  /* Background grid variables (consolidated from duplicate :root) */
  --bg-grid-bg: #0c0c0d;
  --bg-grid-accent1: rgba(90, 139, 255, 0.28);
  --bg-grid-accent2: rgba(130, 255, 220, 0.18);
  --bg-grid-line: rgba(90, 139, 255, 0.12);
  --bg-grid-line-2: rgba(90, 139, 255, 0.08);
  --bg-grid-orb-1: rgba(90, 139, 255, 0.45);
  --bg-grid-orb-2: rgba(130, 255, 220, 0.4);
  
  /* Responsive layout variables - reduces .main-layout repetition */
  --layout-gap: clamp(12px, 1.2vw, 15px);
  --layout-padding: clamp(18px, 2vw, 28px);
  --sidebar-width: clamp(272px, 25vw, 320px);
  --viewer-min-width: clamp(280px, 28vw, 320px);
  --layout-columns: var(--sidebar-width) minmax(400px, 1fr) minmax(var(--viewer-min-width), 0.8fr);
  --layout-areas: "sidebar editor viewer";
  --nav-center-order: 0;
  --nav-center-width: auto;
  --card-pad: 22px;
  --sidebar-pad: 20px 18px 0 18px;
  --media-btn-pad: 8px 14px;
  --media-btn-font: 0.92rem;
  --modal-max-width: 880px;
  --modal-pad: 24px 28px;
  --modal-radius: var(--radius-lg);
  --poi-modal-max-width: 840px;
  --poi-modal-pad: var(--modal-pad);
  --poi-modal-radius: var(--modal-radius);
  
  /* Tab button variables - consolidates .tab-btn repetition */
  --tab-padding: clamp(8px, 0.8vw, 10px);
  --tab-font-size: clamp(0.85rem, 1vw, 1.08rem);
  --tab-border-radius: var(--radius-md);
  --tab-bg: linear-gradient(90deg, var(--color-navbar-bg-start) 0%, var(--color-navbar-bg-end) 100%);
  --tab-bg-hover: var(--color-navicon-hover);
  --tab-bg-active: var(--color-accent-alpha);
  --timeline-progress-bg: radial-gradient(circle at clamp(16px, calc(16px + (100% - 32px) * var(--percent)), calc(100% - 16px)) 50%, rgba(122, 139, 255, 0.35) 0%, rgba(122, 139, 255, 0.08) 35%, rgba(122, 139, 255, 0) 70%);
  --timeline-handle-border: rgba(122, 139, 255, 0.55);
  
  /* Modal and overlay colors */
  --modal-bg: rgba(32, 36, 48, 0.98);
  --modal-border: rgba(90, 139, 255, 0.18);
  --modal-shadow: rgba(0, 0, 0, 0.25);
  --overlay-bg: rgba(90, 139, 255, 0.32);
  --overlay-shadow: rgba(90, 139, 255, 0.18);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --modal-gradient-start: rgba(21, 21, 32, 0.72);
  --modal-gradient-end: rgba(12, 13, 22, 0.58);
  --modal-bg-solid: rgba(18, 19, 30, 0.6);
  --modal-border-light: rgba(118, 137, 255, 0.16);
  
  /* Button colors */
  --btn-primary-bg-start: #5a8bff;
  --btn-primary-bg-end: #7a9fff;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: rgba(90, 139, 255, 0.4);
  --btn-primary-shadow-hover: rgba(104, 156, 255, 0.46);
  --btn-primary-shadow-active: rgba(74, 118, 238, 0.38);
  
  /* Project item colors */
  --project-bg-start: rgba(30, 32, 48, 0.78);
  --project-bg-end: rgba(20, 21, 34, 0.66);
  --project-border: rgba(118, 137, 255, 0.28);
  --project-text: rgba(231, 233, 255, 0.92);
  --project-border-hover: rgba(118, 137, 255, 0.45);
  --project-shadow: rgba(20, 22, 46, 0.45);
  --project-focus-ring: rgba(122, 139, 255, 0.5);
  
  /* Highlight colors */
  --highlight-red: rgba(255, 0, 0, 1);
  --highlight-accent: rgba(90, 139, 255, 1);
  
  /* Time input colors */
  --time-input-border: rgba(255, 215, 107, 0.5);
  --time-input-bg: rgba(255, 215, 107, 0.1);
  --time-input-border-focus: rgba(255, 215, 107, 0.8);
  
  /* Pre-calculated color-mix values for performance (dark theme) */
  --panel-semi-transparent: rgba(17, 17, 22, 0.5);
  --panel-70-transparent: rgba(17, 17, 22, 0.7);
  --panel-80-transparent: rgba(17, 17, 22, 0.8);
  --bg-semi-transparent: rgba(12, 12, 13, 0.5);
  --border-semi-transparent: rgba(255, 255, 255, 0.04);
  --accent-panel-mix: rgba(74, 108, 197, 1);
  --time-input-shadow: rgba(255, 215, 107, 0.3);
  
  /* Danger button colors */
  --danger-bg: #d32f2f;
  --danger-bg-hover: #b71c1c;
  --danger-text: #ffffff;
  --danger-shadow: rgba(211, 47, 47, 0.12);
  --danger-light-bg: #ffffff;
  --danger-light-text: #d32f2f;
  --danger-light-bg-hover: #f5bcbc;
  --danger-light-text-hover: #b71c1c;
  
  /* Success/publish button colors */
  --success-bg: #1b8a55;
  --success-border: #1b8a55;
  --success-text: #ffffff;
  --success-shadow: rgba(27, 138, 85, 0.25);
  --success-bg-hover: #24c17d;
  --success-border-hover: #24c17d;
  --success-shadow-hover: rgba(36, 193, 125, 0.35);
  
  /* Timeline colors */
  --timeline-track-start: #5a8bff;
  --timeline-track-mid: #7a8bff;
  --timeline-track-end: #5ce1ff;
  --timeline-handle-bg: #f8fbff;
  --timeline-handle-mid: #a7b1ff;
  --timeline-handle-end: #5c68ff;
  --timeline-caption-text: rgba(231, 231, 234, 0.68);
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --transition: 0.2s ease;
  --panel-motion-duration: 1000ms;
  --panel-motion-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --font-base: 'Segoe UI', 'system-ui', sans-serif;
}
/* Sidebar tabs (consolidated) */
.sidebar-tabs {
  display: flex;
  gap: var(--tab-gap, 8px);
  padding: var(--tab-pad, 0 12px 12px);
  border-bottom: 1px solid var(--color-border-subtle);
}

.tab-btn {
  flex: 1;
  border-radius: var(--tab-radius, var(--radius-md));
  background: var(--tab-bg, var(--interactive-bg));
  color: var(--tab-color, var(--color-text));
  padding: var(--tab-padding, 9px 14px);
  font-size: var(--tab-font-size, 1.05rem);
  font-weight: 600;
  border: 1px solid var(--tab-border, var(--color-border-subtle));
  transition: background var(--transition), color var(--transition), border var(--transition), box-shadow var(--transition);
  box-shadow: var(--tab-shadow, none);
}

.tab-btn:hover,
.tab-btn:focus {
  background: var(--tab-bg-hover, var(--interactive-bg-hover));
  color: var(--tab-color-hover, var(--color-text));
  border-color: var(--tab-border-hover, var(--interactive-border-hover));
  box-shadow: var(--tab-shadow-hover, var(--shadow-soft));
}

.tab-btn.active {
  background: var(--tab-bg-active, var(--interactive-bg-active));
  color: var(--tab-color-active, var(--text-inverse));
  border-color: var(--tab-border-active, var(--interactive-border-active));
  box-shadow: var(--tab-shadow-active, var(--shadow-elevated));
}

[data-theme="light"] {
  --color-bg: #f5f6fb;
  --color-panel: #ffffff;
  --color-sidebar: #f1f3fc;
  --color-navbar-bg-start: #ffffff;
  --color-navbar-bg-end: #eef2ff;
  --color-navicon-bg: #e5e9fb;
  --color-navicon-hover: #d9def8;
  --color-profile-chip-bg-start: #e9edff;
  --color-profile-chip-bg-end: #5a8bff;
  --color-profile-chip-text: #1e1f2c;
  --color-profile-menu: #ffffff;
  --color-profile-menu-border: rgba(36, 42, 90, 0.12);
  --color-tooltip-bg: #ffffff;
  --color-tooltip-border: rgba(36, 42, 90, 0.14);
  --color-text: #1f2030;
  --color-text-strong: #131429;
  --color-text-secondary: #5e6278;
  --color-muted: #5e6278;
  --color-border: rgba(48, 62, 110, 0.24);
  --color-border-subtle: rgba(48, 62, 110, 0.16);
  --color-divider: rgba(36, 42, 90, 0.12);
  --color-danger: #c81f41;
  --color-placeholder: rgba(31, 33, 52, 0.45);
  --color-input-bg: rgba(255, 255, 255, 0.92);
  --color-input-border: rgba(48, 62, 110, 0.18);
  --color-scrollbar-thumb: rgba(90, 139, 255, 0.45);
  
  /* Background grid overrides for light theme */
  --bg-grid-bg: #f6f8ff;
  --bg-grid-accent1: rgba(90, 139, 255, 0.2);
  --bg-grid-accent2: rgba(60, 180, 200, 0.16);
  --bg-grid-line: rgba(40, 70, 120, 0.08);
  --bg-grid-line-2: rgba(40, 70, 120, 0.05);
  --bg-grid-orb-1: rgba(90, 139, 255, 0.3);
  --bg-grid-orb-2: rgba(80, 200, 180, 0.28);
  --color-scrollbar-track: rgba(90, 139, 255, 0.12);
  --shadow-soft: 0 2px 16px rgba(15, 24, 64, 0.12);
  --shadow-elevated: 0 12px 28px rgba(15, 24, 64, 0.16);
  
  /* Surface colors */
  --surface-elevated: #ffffff;
  --surface-muted: #f8f9fc;
  --surface-gradient-start: #ffffff;
  --surface-gradient-end: #f5f6fb;
  --surface-card: #ffffff;
  
  /* Text colors */
  --text-inverse: #000000;
  --text-primary: #1f2030;
  --text-secondary: #5e6278;
  --text-muted: rgba(31, 32, 48, 0.5);
  
  /* Asset chip colors - lighter variants for light mode */
  --color-chip-image: #3498ff;
  --color-chip-video: #e74c3c;
  --color-chip-sound: #e67e22;
  --color-chip-document: #6c5ce7;
  --color-chip-model: #00b894;
  --color-chip-link: #5a8bff;
  --color-chip-time: #f39c12;
  
  /* Status badge colors - light mode */
  --status-default-bg: rgba(90, 139, 255, 0.1);
  --status-default-border: rgba(90, 139, 255, 0.25);
  --status-default-text: #2563eb;
  --status-published-bg: rgba(34, 197, 94, 0.1);
  --status-published-border: rgba(34, 197, 94, 0.25);
  --status-published-text: #059669;
  --status-draft-bg: rgba(245, 158, 11, 0.1);
  --status-draft-border: rgba(245, 158, 11, 0.25);
  --status-draft-text: #d97706;
  --status-archived-bg: rgba(107, 114, 128, 0.1);
  --status-archived-border: rgba(107, 114, 128, 0.25);
  --status-archived-text: #4b5563;
  
  /* Sync status badge colors - light mode */
  --sync-badge-bg-start: rgba(59, 130, 246, 0.9);
  --sync-badge-bg-end: rgba(37, 99, 235, 0.9);
  --sync-badge-text: #ffffff;
  --sync-badge-shadow: rgba(59, 130, 246, 0.25);
  --sync-badge-shadow-hover: rgba(59, 130, 246, 0.35);
  --sync-badge-shadow-active: rgba(59, 130, 246, 0.2);
  
  /* XR interface colors - light mode */
  --xr-panel-shadow: rgba(0, 0, 0, 0.1);
  --xr-panel-shadow-elevated: rgba(59, 130, 246, 0.2);
  --xr-hud-bg: rgba(59, 130, 246, 0.9);
  --xr-hud-text: #ffffff;
  
  /* Interactive element colors - light mode */
  --interactive-bg: rgba(59, 130, 246, 0.08);
  --interactive-bg-hover: rgba(59, 130, 246, 0.12);
  --interactive-bg-active: rgba(59, 130, 246, 0.16);
  --interactive-border: rgba(59, 130, 246, 0.2);
  --interactive-border-hover: rgba(59, 130, 246, 0.35);
  --interactive-border-active: rgba(59, 130, 246, 0.45);
  --interactive-shadow: rgba(59, 130, 246, 0.15);
  --focus-ring: rgba(59, 130, 246, 0.2);
  --focus-ring-strong: rgba(59, 130, 246, 0.3);
  
  /* Marker and map element colors - light mode */
  --marker-pulse-shadow: rgba(59, 130, 246, 0.4);
  --marker-selected-shadow: rgba(59, 130, 246, 0.35);
  
  /* Timeline component colors - light mode */
  --timeline-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.8) 100%);
  --timeline-border: rgba(59, 130, 246, 0.2);
  --timeline-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.8), 0 4px 6px rgba(0, 0, 0, 0.1);
  --timeline-track-bg: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.8) 55%, rgba(203, 213, 225, 0.6) 100%);
  --timeline-scrub-bg: linear-gradient(90deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%);
  --timeline-scrub-border: rgba(59, 130, 246, 0.25);
  --timeline-glow: rgba(59, 130, 246, 0.3);
  --timeline-glow-active: rgba(59, 130, 246, 0.4);
  --timeline-glow-secondary: rgba(59, 130, 246, 0.2);
  --timeline-progress-bg: radial-gradient(circle at clamp(16px, calc(16px + (100% - 32px) * var(--percent)), calc(100% - 16px)) 50%, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.08) 35%, rgba(59, 130, 246, 0) 70%);
  --timeline-handle-border: rgba(59, 130, 246, 0.6);
  
  /* Modal and overlay colors - light mode */
  --modal-bg: #ffffff;
  --modal-border: rgba(59, 130, 246, 0.2);
  --modal-shadow: rgba(0, 0, 0, 0.15);
  --overlay-bg: rgba(59, 130, 246, 0.25);
  --overlay-shadow: rgba(59, 130, 246, 0.15);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --modal-gradient-start: rgba(248, 250, 252, 0.95);
  --modal-gradient-end: rgba(241, 245, 249, 0.9);
  --modal-bg-solid: rgba(255, 255, 255, 0.95);
  --modal-border-light: rgba(59, 130, 246, 0.12);
  
  /* Button colors - light mode */
  --btn-primary-bg-start: #3b82f6;
  --btn-primary-bg-end: #1d4ed8;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: rgba(59, 130, 246, 0.3);
  --btn-primary-shadow-hover: rgba(37, 99, 235, 0.4);
  --btn-primary-shadow-active: rgba(29, 78, 216, 0.35);
  
  /* Project item colors - light mode */
  --project-bg-start: rgba(248, 250, 252, 0.9);
  --project-bg-end: rgba(241, 245, 249, 0.8);
  --project-border: rgba(59, 130, 246, 0.2);
  --project-text: #1f2937;
  --project-border-hover: rgba(59, 130, 246, 0.4);
  --project-shadow: rgba(0, 0, 0, 0.1);
  --project-focus-ring: rgba(59, 130, 246, 0.4);
  
  /* Highlight colors - light mode */
  --highlight-red: rgba(239, 68, 68, 1);
  --highlight-accent: rgba(59, 130, 246, 1);
  
  /* Time input colors - light mode */
  --time-input-border: rgba(245, 158, 11, 0.4);
  --time-input-bg: rgba(245, 158, 11, 0.08);
  --time-input-border-focus: rgba(245, 158, 11, 0.6);
  --time-input-shadow: rgba(245, 158, 11, 0.25);
  
  /* Danger button colors - light mode */
  --danger-bg: #dc2626;
  --danger-bg-hover: #b91c1c;
  --danger-text: #ffffff;
  --danger-shadow: rgba(220, 38, 38, 0.15);
  --danger-light-bg: #fef2f2;
  --danger-light-text: #dc2626;
  --danger-light-bg-hover: #fee2e2;
  --danger-light-text-hover: #b91c1c;
  
  /* Success/publish button colors - light mode */
  --success-bg: #059669;
  --success-border: #059669;
  --success-text: #ffffff;
  --success-shadow: rgba(5, 150, 105, 0.2);
  --success-bg-hover: #10b981;
  --success-border-hover: #10b981;
  --success-shadow-hover: rgba(16, 185, 129, 0.3);
  
  /* UI colors */
  --color-white: #000000;
  --color-accent-alpha: rgba(90, 139, 255, 0.15);
  --color-shadow-dark: rgba(0, 0, 0, 0.15);
  
  /* Pre-calculated color-mix values for performance (light theme) */
  --panel-semi-transparent: rgba(255, 255, 255, 0.5);
  --panel-70-transparent: rgba(255, 255, 255, 0.7);
  --panel-80-transparent: rgba(255, 255, 255, 0.8);
  --bg-semi-transparent: rgba(245, 246, 251, 0.5);
  --border-semi-transparent: rgba(0, 0, 0, 0.04);
  --accent-panel-mix: rgba(144, 173, 247, 1);
  
  /* Notification colors - darker variants for light mode */
  --notification-success-bg: #10b981;
  --notification-success-text: #ffffff;
  --notification-success-border: #059669;
  --notification-error-bg: #ef4444;
  --notification-error-text: #ffffff;
  --notification-error-border: #dc2626;
  --notification-info-bg: #3b82f6;
  --notification-info-text: #ffffff;
  --notification-info-border: #2563eb;
  
  /* Timeline colors - adjusted for light mode */
  --timeline-track-start: #4f46e5;
  --timeline-track-mid: #6366f1;
  --timeline-track-end: #06b6d4;
  --timeline-handle-bg: #1e293b;
  --timeline-handle-mid: #475569;
  --timeline-handle-end: #334155;
  --timeline-caption-text: rgba(31, 32, 48, 0.68);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* Universal button hover styling - accent tint effect */
button:hover:not(:disabled):not(.no-hover-effect) {
  background: var(--color-navicon-hover);
  color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(90, 139, 255, 0.18);
}

button:focus-visible:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 139, 255, 0.38);
}

/* Animation-enhanced button hover */
@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] button:hover:not(:disabled):not(.no-hover-effect) {
    transform: scale(1.04) translateY(-1px);
  }

  [data-animations="on"] button:active:not(:disabled) {
    transform: scale(0.97);
  }
}

[data-animations="off"] button:hover,
[data-animations="off"] button:active {
  transform: none;
}

input, textarea {
  font: inherit;
  color: inherit;
}

input::placeholder, textarea::placeholder {
  color: var(--color-placeholder);
}

.hidden {
  display: none !important;
}

.card {
  background: var(--color-panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  padding: var(--card-pad);
}

/* Sidebar (consolidated base) */
.sidebar {
  grid-area: sidebar;
  background: var(--color-sidebar);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  padding: var(--sidebar-pad);
  min-height: 0;
  transition: transform 1100ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  position: fixed;
  left: 20px;
  top: 85px;
  bottom: 25px;
  height: auto;
  width: var(--sidebar-width);
  pointer-events: auto;
  overflow: hidden;
  transform: translateX(0);
}

.sidebar.collapsed {
  transform: translateX(calc(-100% - 20px));
  pointer-events: none;
}

/* Navbar (consolidated) */
.navbar {
  height: var(--nav-height, 60px);
  padding: var(--nav-pad, 0 36px);
  gap: var(--nav-gap, 18px);
  background: linear-gradient(90deg, var(--color-navbar-bg-start) 80%, var(--color-navbar-bg-end) 100%);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-soft);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Nav HUD drop-in animation (spec #2 Step 2) */
body:not(.app-ready) .navbar {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

body.app-ready .navbar {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms var(--ease-premium), transform 500ms var(--ease-premium);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.navbar-center {
  flex: 1 1 auto;
  min-width: 0;
  order: var(--nav-center-order, 0);
  width: var(--nav-center-width, auto);
}

.nav-icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-navicon-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  color: var(--color-text);
  border: none;
  box-shadow: 0 1px 4px rgba(90,139,255,0.10);
  position: relative;
}

.nav-icon-button--ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

[data-theme="light"] .nav-icon-button--ghost {
  background: var(--color-panel);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: 0 2px 10px rgba(20, 24, 46, 0.08);
}

[data-theme="light"] .nav-icon-button--ghost i {
  color: var(--color-text);
}

[data-theme="light"] .nav-icon-button--ghost:hover,
[data-theme="light"] .nav-icon-button--ghost:focus-visible {
  background: rgba(90, 139, 255, 0.14);
  border-color: rgba(90, 139, 255, 0.4);
  color: var(--color-accent);
}

[data-theme="dark"] .nav-icon-button--ghost {
  background: var(--color-panel);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: 0 2px 10px rgba(20, 24, 46, 0.08);
}

[data-theme="dark"] .nav-icon-button--ghost:hover,
[data-theme="dark"] .nav-icon-button--ghost:focus-visible {
  background: rgba(90, 139, 255, 0.14);
  border-color: rgba(90, 139, 255, 0.4);
  color: var(--color-accent);
}

.nav-icon-button--accent {
  background: var(--color-navicon-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(90,139,255,0.10);
  overflow: hidden;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition), border-color var(--transition), color var(--transition);
}

.nav-icon-button--accent i {
  font-size: 1.35rem;
  position: relative;
  z-index: 1;
}

.nav-icon-button__pulse {
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(154, 179, 255, 0.55) 0%, rgba(154, 179, 255, 0.18) 55%, transparent 72%);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.35s ease, transform 0.45s ease;
  pointer-events: none;
  z-index: 0;
  animation: nav-icon-pulse 3.6s ease-in-out infinite;
}

.nav-icon-button.nav-icon-button--accent:hover {
  background: var(--color-navicon-hover);
  border-color: rgba(90, 139, 255, 0.45);
  box-shadow: 0 2px 8px rgba(90,139,255,0.18);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.nav-icon-button.nav-icon-button--accent:focus-visible {
  background: var(--color-navicon-hover);
  border-color: rgba(90, 139, 255, 0.45);
  color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.38), 0 6px 18px rgba(90, 139, 255, 0.22);
  outline: none;
}

.nav-icon-button.nav-icon-button--accent:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* Sync button connected state - green when device is connected */
.nav-icon-button--accent[data-connected="true"] {
  background: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

.nav-icon-button--accent[data-connected="true"]:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.45);
}

.nav-icon-button--accent[data-connected="true"] .nav-icon-button__pulse {
  opacity: 0.75;
  transform: scale(0.92);
  background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.55) 0%, rgba(34, 197, 94, 0.18) 55%, transparent 72%);
}

.sync-status-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sync-badge-bg-start) 0%, var(--sync-badge-bg-end) 100%);
  color: var(--sync-badge-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px var(--sync-badge-shadow);
  z-index: 2;
}

.nav-icon-button--accent:hover .sync-status-badge,
.nav-icon-button--accent:focus-visible .sync-status-badge {
  box-shadow: 0 8px 22px var(--sync-badge-shadow-hover);
}

.nav-icon-button--accent:active .sync-status-badge {
  box-shadow: 0 5px 14px var(--sync-badge-shadow-active);
}

/* Connected state - green indicator */
.nav-icon-button--accent[data-connected="true"] {
  background: linear-gradient(140deg, rgba(16, 185, 129, 0.45) 0%, rgba(52, 211, 153, 0.25) 38%, rgba(5, 150, 105, 0.38) 100%) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.22) !important;
}

.nav-icon-button--accent[data-connected="true"]:hover,
.nav-icon-button--accent[data-connected="true"]:focus-visible {
  background: linear-gradient(140deg, rgba(34, 197, 94, 0.62) 0%, rgba(74, 222, 128, 0.38) 40%, rgba(22, 163, 74, 0.6) 100%) !important;
  border-color: rgba(34, 197, 94, 0.65) !important;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.32) !important;
}

.nav-icon-button--accent[data-connected="true"]:active {
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.24) !important;
}

.nav-icon-button--accent[data-connected="true"] .nav-icon-button__pulse {
  background: radial-gradient(circle at 50% 50%, rgba(134, 239, 172, 0.55) 0%, rgba(134, 239, 172, 0.18) 55%, transparent 72%);
}

.nav-icon-button:hover {
  background: var(--color-navicon-hover);
  color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(90,139,255,0.18);
}

.nav-icon-button:focus-visible {
  background: var(--color-navicon-hover);
  color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(90,139,255,0.38);
  outline: none;
}

.nav-icon-button--ghost:hover {
  background: rgba(90, 139, 255, 0.18);
  border-color: rgba(90, 139, 255, 0.45);
  color: var(--color-text-strong);
}

.nav-icon-button--ghost:focus-visible {
  background: rgba(90, 139, 255, 0.18);
  border-color: rgba(90, 139, 255, 0.45);
  color: var(--color-text-strong);
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.4), 0 6px 18px rgba(90, 139, 255, 0.22);
}

@keyframes nav-icon-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

.navbar-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: var(--color-input-bg);
  border-radius: 12px;
  padding: 6px 14px;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(90,139,255,0.10);
  border: 1px solid var(--color-input-border);
}

.navbar-search i {
  color: var(--color-muted);
  font-size: 1.1rem;
}

.navbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  color: var(--color-text);
  font-size: 1rem;
  padding: 1px 0;
}

.navbar-profile-chip {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-profile-chip-bg-start) 60%, var(--color-profile-chip-bg-end) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-profile-chip-text);
  box-shadow: 0 1px 4px rgba(90,139,255,0.10);
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.navbar-profile-chip:hover {
  box-shadow: 0 2px 8px rgba(90,139,255,0.18);
}

#notificationsBtn {
  position: relative;
}

.notifications-tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  font-size: 0.85rem;
  color: var(--color-accent);
  background: var(--color-tooltip-bg);
  padding: 4px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(90,139,255,0.18);
  z-index: 10;
  border: 1px solid var(--color-tooltip-border);
}

#shareBtn {
  position: relative;
}

.share-coming-soon {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  font-size: 0.85rem;
  color: var(--color-accent);
  background: var(--color-tooltip-bg);
  padding: 6px 12px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(90,139,255,0.18);
  z-index: 15;
  border: 1px solid var(--color-tooltip-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

#shareBtn:hover .share-coming-soon,
#shareBtn:focus-visible .share-coming-soon,
#shareBtn .share-coming-soon.share-tooltip-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Notifications button tooltip */
#notificationsBtn {
  position: relative;
}

.notifications-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  font-size: 0.85rem;
  color: var(--color-accent);
  background: var(--color-tooltip-bg);
  padding: 6px 12px;
  border-radius: 10px;
  white-space: nowrap;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

#notificationsBtn:hover .notifications-tooltip,
#notificationsBtn:focus-visible .notifications-tooltip,
#notificationsBtn .notifications-tooltip.notifications-tooltip-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.navbar-right .profile-menu {
  position: absolute;
  top: 60px;
  right: 24px;
  min-width: 220px;
  z-index: 10000;
  background: var(--color-profile-menu);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-profile-menu-border);
  backdrop-filter: blur(12px);
}

.profile-menu-item {
  width: 100%;
  text-align: left;
  padding: 12px 24px;
  color: var(--color-text);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background var(--transition), color var(--transition);
}

.profile-menu-item:hover,
.profile-menu-item:focus-visible {
  background: rgba(90, 139, 255, 0.12);
  color: var(--color-text-strong);
  outline: none;
}

.profile-menu-divider {
  height: 1px;
  background: var(--color-divider);
  margin: 6px 0;
}

.profile-menu-theme {
  align-items: center;
}

.profile-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 1.05rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

.profile-menu-label {
  flex: 1;
  font-weight: 500;
}

.profile-menu-value {
  font-size: 0.92rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-left: auto;
}

.profile-menu-danger {
  color: var(--color-danger);
}

/* Install App button - shows when PWA is installable */
.profile-menu-install {
  color: var(--color-accent);
}

.profile-menu-install:hover {
  background: rgba(90, 139, 255, 0.15);
}

.profile-menu-install .profile-menu-icon {
  color: var(--color-accent);
}

/* Badge in profile menu */
.profile-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: 12px;
  margin-left: auto;
}

.profile-menu-badge:empty {
  display: none;
}

.profile-menu-badge.badge-zero {
  background: var(--color-muted);
  opacity: 0.6;
}

/* ===========================
   FULLSCREEN BUTTON
   =========================== */

.fullscreen-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  margin-left: 8px;
}

.fullscreen-btn i {
  font-size: 0.85rem;
}

.fullscreen-btn:hover {
  background: rgba(90, 139, 255, 0.12);
  border-color: rgba(90, 139, 255, 0.4);
  color: var(--color-accent);
}

.fullscreen-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.fullscreen-btn[aria-pressed="true"] {
  background: rgba(90, 139, 255, 0.18);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

[data-theme="light"] .fullscreen-btn {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--color-border);
  color: var(--color-muted);
}

[data-theme="light"] .fullscreen-btn:hover {
  background: rgba(90, 139, 255, 0.1);
  border-color: rgba(90, 139, 255, 0.35);
  color: var(--color-accent);
}

/* ===========================
   INVITATIONS MODAL
   =========================== */

/* Quota display */
.invitations-quota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(90, 139, 255, 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.quota-label {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.quota-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent);
}

.quota-value.quota-zero {
  color: var(--color-danger);
}

/* Invite form */
.invite-form {
  margin-bottom: 16px;
}

.invite-form-row {
  display: flex;
  gap: 12px;
}

.invite-form-row input {
  flex: 1;
}

.invite-form-row button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Divider */
.invitations-divider {
  height: 1px;
  background: var(--color-divider);
  margin: 20px 0;
}

/* Invites list */
.invites-list-header {
  margin-bottom: 12px;
}

.invites-list-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.invites-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.invites-loading,
.invites-empty {
  text-align: center;
  padding: 24px;
  color: var(--color-muted);
}

.invites-empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Individual invite item */
.invite-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition);
}

.invite-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

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

.invite-item-email {
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-item-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.invite-item-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 12px;
  text-transform: capitalize;
}

.invite-item-status.status-pending {
  background: rgba(90, 139, 255, 0.15);
  color: var(--color-accent);
}

.invite-item-status.status-used {
  background: rgba(107, 214, 176, 0.15);
  color: var(--color-success);
}

.invite-item-status.status-expired {
  background: rgba(255, 165, 0, 0.15);
  color: #ffa500;
}

.invite-item-status.status-revoked {
  background: rgba(255, 100, 100, 0.15);
  color: var(--color-danger);
}

.invite-item-actions {
  display: flex;
  gap: 4px;
}

.invite-item-actions button {
  padding: 6px 8px;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.invite-item-actions button:hover {
  background: rgba(90, 139, 255, 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.invite-item-actions button.btn-revoke:hover {
  background: rgba(255, 100, 100, 0.1);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Light theme adjustments */
[data-theme="light"] .invite-item {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .invite-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Language dropdown submenu */
.profile-menu-with-submenu {
  position: relative;
  padding: 0;
}

.profile-menu-with-submenu > button {
  width: 100%;
  text-align: left;
  padding: 12px 24px;
  color: var(--color-text);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.profile-menu-with-submenu > button:hover,
.profile-menu-with-submenu > button:focus-visible {
  background: rgba(90, 139, 255, 0.12);
  color: var(--color-text-strong);
  outline: none;
}

.profile-menu-chevron {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-muted);
  transition: transform 0.2s ease;
}

.profile-menu-with-submenu > button[aria-expanded="true"] .profile-menu-chevron {
  transform: rotate(90deg);
}

/* Inline submenu wrappers - expand within the menu */
.language-dropdown-wrapper,
.help-dropdown-wrapper,
.enhanced-mode-dropdown-wrapper {
  overflow: hidden;
}

/* Inline submenu containers - darker background for visual hierarchy */
.language-dropdown-menu,
.help-dropdown-menu,
.enhanced-mode-dropdown-menu {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  margin: 4px 8px 8px;
  padding: 4px;
  border-left: 2px solid var(--color-accent-subtle);
}

.language-dropdown-menu.hidden,
.help-dropdown-menu.hidden,
.enhanced-mode-dropdown-menu.hidden {
  display: none;
}

/* Submenu options */
.language-option,
.help-option,
.enhanced-mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--transition), color var(--transition);
}

.language-option:hover,
.language-option:focus-visible,
.help-option:hover,
.help-option:focus-visible,
.enhanced-mode-option:hover,
.enhanced-mode-option:focus-visible {
  background: rgba(90, 139, 255, 0.15);
  color: var(--color-text-strong);
  outline: none;
}

/* Enhanced mode option styling */
.enhanced-mode-option-icon {
  width: 18px;
  text-align: center;
  color: var(--color-muted);
  transition: color var(--transition);
}

.enhanced-mode-option-label {
  flex: 1;
}

.enhanced-mode-option-value {
  font-size: 0.8rem;
  color: var(--color-muted);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}

.enhanced-mode-option[aria-pressed="true"] .enhanced-mode-option-value {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.enhanced-mode-option[aria-pressed="true"] .enhanced-mode-option-icon {
  color: var(--color-accent);
}

.language-option.active {
  background: var(--color-accent-subtle);
  color: var(--color-accent-strong);
}

.language-option-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.help-option-icon {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  width: 18px;
  text-align: center;
}

.help-option:hover .help-option-icon {
  color: var(--color-accent);
}

.help-option-label {
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1;
}

.help-option-value {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

.help-option-toggle {
  justify-content: space-between;
}

.profile-menu-chevron {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  margin-left: 8px;
}

/* When there's no value, chevron takes auto margin */
.profile-menu-label + .profile-menu-chevron {
  margin-left: auto;
}

/* Chevron rotates down when submenu is expanded */
.profile-menu-item[aria-expanded="true"] .profile-menu-chevron {
  transform: rotate(90deg);
}

/* Light theme - lighter submenu background */
[data-theme="light"] .language-dropdown-menu,
[data-theme="light"] .help-dropdown-menu {
  background: rgba(0, 0, 0, 0.06);
  border-left-color: var(--color-accent);
}

.profile-menu-danger {
  color: var(--color-danger);
}

/* Entry sequencing */
body:not(.app-ready) .navbar {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}
body.app-ready .navbar {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-default) var(--ease-premium), transform var(--motion-default) var(--ease-premium);
}

body:not(.app-ready) .mode-selector,
body:not(.app-ready) .view-switcher-row,
body:not(.app-ready) #textWorkspace,
body:not(.app-ready) #map2dPanel,
body:not(.app-ready) #map3dPanel,
body:not(.app-ready) .timeline-slider-container {
  opacity: 0;
  transform: scale(0.96);
}
body.app-ready .mode-selector,
body.app-ready .view-switcher-row,
body.app-ready #textWorkspace,
body.app-ready #map2dPanel,
body.app-ready #map3dPanel,
body.app-ready .timeline-slider-container {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--motion-slow) var(--ease-premium), transform var(--motion-slow) var(--ease-premium);
}

body:not(.app-ready) .sidebar {
  opacity: 0;
  transform: translateX(-28px);
  pointer-events: none;
}
body.app-ready .sidebar {
  opacity: 1;
  transform: translateX(0);
  transition: transform var(--panel-motion-duration) var(--panel-motion-ease),
              opacity var(--motion-default) var(--ease-premium);
}
body.app-ready .sidebar.collapsed {
  transform: translateX(calc(-100% - 20px));
  pointer-events: none;
}

/* Main layout (consolidated) */
.main-layout {
  --sidebar-width: 320px;
  --chat-width: clamp(320px, 22vw, 360px);
  --viewer-min-width: 320px;
  --layout-gap: 15px;
  display: grid;
  grid-template-columns: minmax(400px, 1fr) minmax(var(--viewer-min-width), 0.8fr);
  grid-template-areas: "editor viewer";
  grid-template-rows: 1fr;
  margin-top: 60px;
  align-items: stretch;
  align-content: stretch;
  gap: var(--layout-gap);
  padding: 24px 28px 20px calc(var(--sidebar-width) + 40px);
  height: calc(100vh - 60px);
  box-sizing: border-box;
  transition: padding 600ms var(--panel-motion-ease);
}

.main-layout.sidebar-collapsed {
  padding-left: 24px;
}

.main-layout.mixx-ai-open {
  padding-right: calc(var(--chat-width) + 40px);
}
@media (max-width: 1600px) {
  /*
    BREAKPOINT INTENT: At 1600px and below, do NOT override grid-template-columns. 
    Let the base wide layout (320px minmax(0, 1fr) minmax(0, 0.8fr)) persist until tablet collapse.
    Only adjust gap/padding if needed for ultra-wide screens, but keep column proportions consistent.
    Sidebar remains 320px. Do not shrink columns here.
  */
  :root {
    --layout-gap: 12px;
    --layout-padding: 22px 24px 20px;
  }
}
@media (max-width: 1280px) {
  /*
    BREAKPOINT INTENT: At 1280px and below we tighten spacing and reduce the fixed sidebar footprint so the editor
    column retains breathing room on laptop displays. Viewer column keeps a practical minimum width.
  */
  :root {
    --sidebar-width: 272px;
    --viewer-min-width: 280px;
    --layout-gap: 12px;
    --layout-padding: 18px 20px 20px;
    --nav-pad: 0 24px;
    --nav-gap: 14px;
    --nav-height: 54px;
    --modal-max-width: 94vw;
    --modal-pad: 18px;
    --modal-radius: 14px;
    --poi-modal-max-width: 96vw;
    --poi-modal-pad: 16px 18px 14px;
  }
  body {
    font-size: 0.95rem;
    line-height: 1.42;
  }
  .nav-icon-button {
    width: 36px;
    height: 36px;
    padding: 0;
  }
  .nav-icon-button i {
    font-size: 1.1rem;
  }
  .sidebar { padding: 16px 14px 0 14px; top: 85px; bottom: 25px; }
  .editor-column {
    gap: 12px;
  }
  .editor-header {
    padding: 10px 14px;
    gap: 10px;
  }
  .card h2 {
    font-size: 1.2rem;
  }
  .card h3 {
    font-size: 1.05rem;
  }
  .workspace-panel.center-active {
    min-height: 460px;
  }
  .panel-header {
    padding: 6px 14px;
    font-size: 0.95rem;
  }
  .map-panel .panel-header {
    padding: 6px 12px;
  }
  .panel-header .panel-subtitle,
  .panel-header .panel-badge {
    font-size: 0.85rem;
  }
  .panel-header .panel-controls {
    gap: 6px;
  }
  .map-nav-btn,
  .panel-lock-btn {
    width: 34px;
    height: 34px;
  }
  .view-switcher-row {
    gap: 4px;
  }
  .view-switcher-row button {
    min-width: 38px;
    padding: 6px 9px;
    font-size: 0.85rem;
  }
  .map-toolbar {
    gap: 8px;
  }
  .map-tool-btn {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
  .icon-btn { width: 34px; height: 34px; }
  .timeline-slider-container {
    padding: 10px 14px;
  }
  .timeline-slider-label {
    font-size: 0.8rem;
  }
  .timeline-slider-value-chip {
    font-size: 0.82rem;
  }
  .modal-content--compact {
    --modal-pad: 14px 16px;
  }
  .modal-content--large {
    --modal-max-width: 560px;
    --modal-width: min(560px, 96vw);
    --modal-pad: 18px 20px;
  }
  .poi-field,
  .poi-field--wide,
  .data-section,
  .media-dropzone,
  .sidebar-search,
  .sidebar-actions {
    padding: 10px 12px;
    gap: 10px;
  }
  .sidebar-search {
    gap: 8px;
  }
  .media-dropzone-icon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }
  .media-dropzone {
    gap: 12px;
  }
  .media-dropzone-actions {
    gap: 6px;
  }
  .media-upload-btn,
  .media-url-btn {
    padding: 7px 12px;
    font-size: 0.88rem;
  }
  .media-grid {
    gap: 10px;
  }
  .poi-field label,
  .data-label {
    font-size: 0.85rem;
  }
  .poi-field input,
  .poi-field textarea,
  .poi-field select,
  .data-input,
  .data-json-preview,
  .sidebar-search input,
  .card input,
  .card textarea,
  .card select {
    font-size: 0.9rem;
    padding: 8px 10px;
  }
  .poi-actions { --poi-gap: 8px; }
  .poi-actions .btn,
  .poi-actions button {
    padding: 8px 14px;
    font-size: 0.9rem;
  }
  .poi-list-item {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  .poi-list-item .poi-badge,
  .poi-list-item .poi-coords {
    font-size: 0.78rem;
  }
}

/* CONSOLIDATED @media (max-width: 1024px) - see line ~4350 for main block */

/* Hide sidebar and resize columns when collapsed */

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 18px;
}

.sidebar-search i {
  color: var(--color-muted);
}

.sidebar-search input {
  flex: 1;
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  outline: none;
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.poi-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.poi-filter-bar .sidebar-search {
  flex: 1 1 260px;
  margin: 0;
  padding: 10px 12px;
}
.poi-filter-select select {
  min-width: 190px;
  width: 210px;
}
.poi-filter-meta {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 0.92rem;
}
@media (max-width: 720px) {
  .sync-hero {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sync-status-row {
    grid-template-columns: 1fr;
  }
  .sync-quick-actions {
    align-items: flex-start;
    text-align: left;
  }
  .poi-filter-bar .sidebar-search,
  .poi-filter-select select {
    flex: 1 1 100%;
    width: 100%;
  }
  .poi-filter-meta {
    margin-left: 0;
  }
}

/* ===========================================================================
   Scene Tab - Initial Scene Settings (Compact Unified)
   =========================================================================== */

.initial-scene-section {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: 8px 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Unified row layout for all scene settings */
.scene-setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene-setting-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 68px;
}

.scene-setting-label i {
  font-size: 0.8rem;
  color: var(--color-accent);
}

.scene-setting-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Input wrapper */
.scene-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.scene-input-wrapper--with-icon i {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--color-muted);
  pointer-events: none;
}

.scene-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.scene-input-wrapper--with-icon .scene-input {
  padding-left: 24px;
}

.scene-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft, rgba(59, 130, 246, 0.12));
}

.scene-input::placeholder {
  color: var(--color-muted);
  font-size: 0.7rem;
}

/* Action buttons (camera, set) */
.scene-action-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.75rem;
  transition: all var(--transition);
}

.scene-action-btn:hover:not(:disabled) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.scene-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.scene-action-btn--primary:not(:disabled) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Clear button */
.scene-clear-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.65rem;
  transition: all var(--transition);
}

.scene-clear-btn:hover {
  background: var(--color-danger-soft, rgba(239, 68, 68, 0.1));
  border-color: var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
}

/* Capture button */
.scene-capture-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: white;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}

.scene-capture-btn:hover {
  background: var(--color-accent-hover, #2563eb);
}

.scene-capture-btn i {
  font-size: 0.75rem;
}

/* Inline preview (shown after capture) */
.scene-preview-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--color-success-soft, rgba(34, 197, 94, 0.12));
  border-radius: var(--radius-sm, 4px);
  flex: 1;
}

.scene-preview-inline.hidden {
  display: none;
}

.scene-preview-inline > i {
  color: var(--color-success, #22c55e);
  font-size: 0.75rem;
}

.scene-preview-inline .scene-preview-text {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-success, #22c55e);
}

/* Start POI Dropdown */
.start-poi-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 160px;
  overflow-y: auto;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.15));
  z-index: 100;
  margin-top: 2px;
}

.start-poi-dropdown.hidden {
  display: none;
}

.start-poi-dropdown-item {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-text);
  transition: background var(--transition);
}

.start-poi-dropdown-item:hover,
.start-poi-dropdown-item:focus {
  background: var(--interactive-bg-hover);
}

.start-poi-dropdown-item.selected {
  background: var(--interactive-bg-active);
  color: var(--color-text-strong);
}

.start-poi-dropdown-item .poi-name {
  flex: 1;
}

.start-poi-dropdown-item .poi-category {
  font-size: 0.65rem;
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 1px 5px;
  border-radius: 3px;
}

.start-poi-dropdown-empty {
  padding: 10px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.75rem;
}



/* POI Management Section Header */
.poi-management-section {
  margin-bottom: 12px;
}

.poi-management-section .section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* ===========================================================================
   Badge System (reusable across features)
   =========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge i {
  font-size: 0.65rem;
}

.badge--start {
  background: var(--color-accent-soft, rgba(59, 130, 246, 0.15));
  color: var(--color-accent);
}

.badge.hidden {
  display: none;
}

/* ===========================================================================
   Start POI State in POI List
   =========================================================================== */

/* List item state class for Start POI */
.poi-list-item.is-start {
  border-color: var(--color-accent-soft, rgba(59, 130, 246, 0.3));
}

.poi-list-item.is-start:not(.active) {
  background: var(--color-accent-soft, rgba(59, 130, 246, 0.05));
}

/* Badge positioning in list item */
.poi-list-item .poi-start-badge {
  margin-left: auto;
  cursor: help;
}

/* ===========================================================================
   Start Scene Checkbox in POI Modal (compact header toggle)
   =========================================================================== */

/* POI Modal header layout */
#poi-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#poi-modal .modal-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Compact Start Scene toggle */
.poi-start-scene-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  font-size: 0.8rem;
}

.poi-start-scene-toggle:hover {
  background: var(--interactive-bg-hover);
  border-color: var(--interactive-border-hover);
}

.poi-start-scene-toggle:has(.poi-start-scene-checkbox:checked) {
  background: var(--color-accent-soft, rgba(59, 130, 246, 0.15));
  border-color: var(--color-accent);
}

.poi-start-scene-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--color-accent);
  cursor: pointer;
  margin: 0;
}

.poi-start-scene-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.poi-start-scene-toggle:has(.poi-start-scene-checkbox:checked) .poi-start-scene-label {
  color: var(--color-accent);
}

.poi-start-scene-label i {
  font-size: 0.75rem;
  color: var(--color-accent);
}

/* ===========================================================================
   Start POI Confirmation Modal
   =========================================================================== */

#start-poi-confirm-modal .modal-content--compact {
  max-width: 400px;
}

#start-poi-confirm-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
}

#start-poi-confirm-modal .modal-body p {
  color: var(--color-text-secondary);
  line-height: 1.5;
}

#start-poi-confirm-modal .current-start-poi,
#start-poi-confirm-modal .new-start-poi {
  font-weight: 600;
  color: var(--color-text);
}

#start-poi-confirm-modal .modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.sidebar-actions {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--interactive-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--interactive-border);
  color: var(--color-text-secondary);
  transition: background var(--transition), color var(--transition), border var(--transition), box-shadow var(--transition);
}

.icon-btn:hover,
.icon-btn:focus {
  background: var(--interactive-bg-hover);
  color: var(--color-text);
  border-color: var(--interactive-border-hover);
  box-shadow: var(--shadow-hover);
}

.sidebar-content {
  flex: 1;
  min-height: 0;
  overflow-y: hidden;
  padding: 8px 0 8px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.projects-list li {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.project-item.selected {
  background: var(--interactive-bg-active);
  color: var(--color-text);
  border-color: var(--interactive-border-active);
  box-shadow: var(--shadow-selected);
  transform: translateY(-2px);
}
.project-item.selected .project-title,
.project-item.selected .project-meta-item,
.project-item.selected .project-pois,
.project-item.selected .project-tags {
  color: var(--color-text-strong);
}
.project-item.selected .project-status {
  background: var(--interactive-bg);
  color: var(--color-text);
  border: 1px solid var(--interactive-border);
}
.projects-list li:hover,
.projects-list li:focus {
  background: var(--interactive-bg-hover);
  color: var(--color-text);
  outline: none;
}

.subtabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 5px;
  font-size: 1rem;
}

/* Level 2: Inner Data Tabs - Pills/Chips Style */
.data-inner-tabs {
  display: flex;
  gap: 6px;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 8px 10px 0 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.data-inner-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.data-inner-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-x: hidden;
  padding-bottom: 12px;
}

/* ==========================================================================
   Data Tab Two-Level Tab Structure
   ========================================================================== */

/* Level 1: Primary Data Tabs - Segmented Control Style */
.data-primary-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  padding: 3px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* Segmented control buttons */
.data-primary-tab-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: 6px;
  height: 30px;
  min-height: 30px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.8rem;
}

.data-primary-tab-btn:hover:not(.disabled),
.data-primary-tab-btn:focus:not(.disabled) {
  background: var(--interactive-bg-hover);
  color: var(--color-text);
}

.data-primary-tab-btn.active {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.data-primary-tab-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--color-muted);
  background: transparent;
}

/* Level 1: Primary Panels */
/* Data tab: all tab rows stay fixed, only innermost content scrolls */
#subtab-data .subtab-body {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
}

.data-primary-tabs {
  flex-shrink: 0;
}

.data-primary-panels {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.data-primary-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#subtab-data .data-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
  overflow: hidden;
}

.data-primary-panel.hidden {
  display: none;
}

/* Level 2: Inner Panels - Fixed Height (No Scroll) */
.data-inner-panels--fixed {
  overflow: visible;
  max-height: none;
}

.data-inner-panels--fixed .data-inner-panel {
  overflow: visible;
  max-height: none;
}

/* Import and Preview panels should be scrollable (have more content) */
.data-inner-panels--fixed #data-panel-import,
.data-inner-panels--fixed #data-panel-preview {
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  flex: 1;
  padding-bottom: 16px;
}

/* ==========================================================================
   Live Layers UI
   ========================================================================== */

.live-layers-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #555) var(--scrollbar-track, transparent);
}

.live-layers-container::-webkit-scrollbar {
  width: 6px;
}

.live-layers-container::-webkit-scrollbar-track {
  background: transparent;
}

.live-layers-container::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #555);
  border-radius: 3px;
}

.live-layers-container::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #777);
}

/* Layer Category Groups */
.live-layer-category {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.live-layer-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--interactive-bg);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-strong);
}

.live-layer-category-header i {
  font-size: 1.1rem;
  color: var(--color-accent);
}

.live-layer-category-title {
  font-size: 0.95rem;
}

/* Layer Toggle Options */
.live-layer-options {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.live-layer-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.live-layer-toggle:hover:not(.disabled) {
  background: var(--interactive-bg-hover);
}

.live-layer-toggle.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Toggle Switch Slider */
.live-layer-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.live-layer-toggle-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--color-border);
  border-radius: 22px;
  transition: background var(--transition);
  flex-shrink: 0;
}

.live-layer-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.live-layer-toggle input:checked + .live-layer-toggle-slider {
  background: var(--color-accent);
}

.live-layer-toggle input:checked + .live-layer-toggle-slider::before {
  transform: translateX(18px);
}

.live-layer-toggle input:focus-visible + .live-layer-toggle-slider {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.live-layer-toggle input:disabled + .live-layer-toggle-slider {
  background: var(--color-border);
  opacity: 0.5;
}

.live-layer-label {
  font-size: 0.95rem;
  color: var(--color-text);
  flex: 1;
}

.live-layer-unavailable {
  font-size: 0.8rem;
  color: var(--color-muted);
  background: var(--interactive-bg);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}

/* Layer Status Footer */
.live-layers-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--interactive-bg);
  border-radius: var(--radius-md);
  margin-top: 8px;
}

.live-layers-count {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.live-layers-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}

.live-layers-refresh-btn:hover {
  background: var(--interactive-bg-hover);
  border-color: var(--interactive-border-hover);
}

/* Weather Status Strip - shown above weather toggles */
.weather-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(60, 140, 200, 0.15), rgba(30, 100, 160, 0.15));
  border: 1px solid rgba(60, 140, 200, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  gap: 8px;
}

.weather-status-strip.hidden {
  display: none;
}

.weather-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text);
}

.weather-status-item i {
  font-size: 1rem;
  color: var(--color-primary);
}

.weather-status-item span {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.weather-status-alerts {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(100, 100, 100, 0.2);
  font-size: 0.8rem;
  color: var(--color-muted);
}

.weather-status-alerts.has-alerts {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

.weather-status-alerts.has-alerts i {
  color: #dc3545;
}

.weather-status-alerts i {
  font-size: 0.9rem;
}

/* Weather HUD Overlay - map overlay */
.weather-hud-overlay {
  position: absolute;
  top: 56px;
  right: 12px;
  z-index: 100;
  background: rgba(20, 25, 30, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  min-width: 140px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.weather-hud-overlay.hidden {
  display: none;
}

.weather-hud-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all var(--transition);
}

.weather-hud-dismiss:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.weather-hud-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 16px;
}

.weather-hud-temp {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.1;
}

.weather-hud-conditions {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.weather-hud-timeofday {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 4px;
}

/* Live Layer Toggle Loading State */
.live-layer-toggle.loading .live-layer-toggle-slider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Connect Placeholder */
.connect-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--color-muted);
}

.connect-placeholder i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.connect-placeholder p {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.connect-placeholder small {
  font-size: 0.85rem;
  opacity: 0.8;
}

.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.media-gallery-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px;
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  min-height: 110px;
  position: relative;
}

.media-gallery-thumb {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  background: var(--color-input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-gallery-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.media-gallery-count {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Duplicate rule removed - using .media-gallery-remove from line ~1216 */

/* Media tab: tabs stay fixed, content scrolls */
#subtab-media .subtab-body {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
}

#subtab-media .media-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}

.media-inner-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  padding: 6px 5px 0 5px; /* top padding for hover animation space */
  flex-wrap: wrap;
  flex-shrink: 0;
}

.media-inner-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.media-inner-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

#sidebar-current .subtab-panels {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: none;
  border: none;
}

#sidebar-current .subtab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
}

#sidebar-current .subtab-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  box-sizing: border-box;
}

/* Ensure form elements don't overflow control panel */
#sidebar-current .subtab-body input[type="text"],
#sidebar-current .subtab-body input[type="url"],
#sidebar-current .subtab-body input[type="email"],
#sidebar-current .subtab-body input[type="number"],
#sidebar-current .subtab-body textarea,
#sidebar-current .subtab-body select {
  max-width: 100%;
  box-sizing: border-box;
}

#subtab-poi .subtab-body {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
}

#subtab-poi .sidebar-search,
#subtab-poi .sidebar-actions {
  flex-shrink: 0;
}

#subtab-poi .poi-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

/* Footer stays in flex flow - never use absolute positioning */
#sidebar-current .footer-bar {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  margin: 0;
  margin-top: auto;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: 20;
}

.subtab-btn {
  flex: 1;
  padding: 7px 12px;
  border-radius: 6px;
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--interactive-border);
  background: var(--interactive-bg);
  color: var(--color-text-secondary);
  transition: background var(--transition), color var(--transition), border var(--transition), box-shadow var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.subtab-btn:hover,
.subtab-btn:focus {
  background: var(--interactive-bg-hover);
  color: var(--color-text);
  border-color: var(--interactive-border-hover);
  box-shadow: var(--shadow-hover);
}

.subtab-btn.active {
  background: var(--interactive-bg-active);
  color: var(--color-text);
  border-color: var(--interactive-border-active);
  box-shadow: var(--shadow-selected);
}

/* ==========================================================================
   Subtab Button Animation System (Animations Toggle)

   When Animations = ON:
   - Rest state: buttons at 90% scale
   - Hover: smoothly scale to 100%
   - Only the hovered button animates
   - Active state remains visually clear

   When Animations = OFF:
   - No scaling, buttons at normal size
   - UI remains stable and predictable
   ========================================================================== */

/* Animations ON: Rest state - buttons slightly smaller */
[data-animations="on"] .subtabs .subtab-btn {
  transform: scale(0.9);
  transform-origin: center center;
  transition:
    transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
    background var(--transition),
    color var(--transition),
    border var(--transition),
    box-shadow var(--transition);
}

/* Animations ON: Hover - scale up to full size (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .subtabs .subtab-btn:hover {
    transform: scale(1);
  }
}

/* Animations ON: Focus state (keyboard nav) - also scale up */
[data-animations="on"] .subtabs .subtab-btn:focus-visible {
  transform: scale(1);
}

/* Animations ON: Active state - slightly larger to emphasize selection */
[data-animations="on"] .subtabs .subtab-btn.active {
  transform: scale(1.05);
}

/* Animations ON: Active + hover - subtle additional lift */
@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .subtabs .subtab-btn.active:hover {
    transform: scale(1.08);
  }
}

/* Animations OFF: No transform, normal size, no motion */
[data-animations="off"] .subtabs .subtab-btn {
  transform: none;
}

/* Touch devices: Always full size, no hover scaling */
@media (hover: none) and (pointer: coarse) {
  [data-animations="on"] .subtabs .subtab-btn,
  [data-animations="off"] .subtabs .subtab-btn {
    transform: none;
  }
}

/* Reduced motion: Disable animation transforms */
@media (prefers-reduced-motion: reduce) {
  .subtabs .subtab-btn {
    transform: none !important;
    transition:
      background var(--transition),
      color var(--transition),
      border var(--transition),
      box-shadow var(--transition) !important;
  }
}

/* ==========================================================================
   End Subtab Button Animation System
   ========================================================================== */

/* ==========================================================================
   UX Polish: Animation-Aware Micro-Interactions

   These effects respect the Animations toggle:
   - data-animations="on"  → Motion effects enabled
   - data-animations="off" → No motion, static UI

   Basic web effects (hover colors, focus outlines) always work.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Navbar Icon Button Micro-Interactions
   --------------------------------------------------------------------------- */

/* Animations ON: Subtle scale on hover for navbar icons */
@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .nav-icon-button:hover {
    transform: scale(1.08) translateY(-1px);
  }

  [data-animations="on"] .nav-icon-button:active {
    transform: scale(0.96);
  }
}

/* Animations OFF: Remove transform effects */
[data-animations="off"] .nav-icon-button:hover,
[data-animations="off"] .nav-icon-button:active {
  transform: none;
}

/* ---------------------------------------------------------------------------
   2. Sidebar Icon Button (Add/Edit/Delete) Micro-Interactions
   --------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .sidebar-actions .icon-btn:hover {
    transform: scale(1.1) translateY(-2px);
  }

  [data-animations="on"] .sidebar-actions .icon-btn:active {
    transform: scale(0.95);
  }
}

[data-animations="off"] .sidebar-actions .icon-btn:hover,
[data-animations="off"] .sidebar-actions .icon-btn:active {
  transform: none;
}

/* ---------------------------------------------------------------------------
   2b. Mixx AI Button - Special "Magic" Hover Effect
   --------------------------------------------------------------------------- */

/* Keyframes for pulsing glow ring */
@keyframes mixxAiGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(59, 130, 246, 0),
      0 0 20px rgba(59, 130, 246, 0.3),
      0 8px 25px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(59, 130, 246, 0.15),
      0 0 30px rgba(139, 92, 246, 0.5),
      0 12px 35px rgba(0, 0, 0, 0.4);
  }
}

/* Keyframes for shimmer sweep across the image */
@keyframes mixxAiShimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Keyframes for subtle idle breathing when panel is open */
@keyframes mixxAiBreathing {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.1);
  }
}

/* Base styling for the AI button image */
.mode-selector .ai-btn {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

/* Animations ON: Magical hover effect */
@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .mode-selector:hover {
    animation: mixxAiGlow 1.5s ease-in-out infinite;
    border-radius: 50%;
  }

  [data-animations="on"] .mode-selector:hover .ai-btn {
    transform: scale(1.12) translateY(-3px);
    filter: brightness(1.15) saturate(1.1);
  }

  /* Shimmer overlay on hover */
  [data-animations="on"] .mode-selector::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
      120deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 60%,
      transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  [data-animations="on"] .mode-selector:hover::after {
    opacity: 1;
    animation: mixxAiShimmer 1.2s ease-in-out infinite;
  }

  /* Active state - quick pulse */
  [data-animations="on"] .mode-selector:active .ai-btn {
    transform: scale(0.95);
    filter: brightness(1.3) saturate(1.2);
  }
}

/* When AI panel is open/active - gentle breathing animation */
[data-animations="on"] .mode-selector[aria-pressed="true"] .ai-btn {
  animation: mixxAiBreathing 3s ease-in-out infinite;
}

/* Animations OFF: Simple hover, no magic */
[data-animations="off"] .mode-selector:hover .ai-btn,
[data-animations="off"] .mode-selector:active .ai-btn {
  transform: none;
  filter: brightness(1.05);
}

[data-animations="off"] .mode-selector::after {
  display: none;
}

/* ---------------------------------------------------------------------------
   3. Project List Item Hover Micro-Interactions
   --------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .project-item:hover {
    transform: translateX(4px);
  }
}

[data-animations="off"] .project-item:hover {
  transform: none;
}

/* ---------------------------------------------------------------------------
   4. POI List Item Hover Micro-Interactions
   --------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .poi-list-item:hover {
    transform: translateX(4px);
  }
}

[data-animations="off"] .poi-list-item:hover {
  transform: none;
}

/* ---------------------------------------------------------------------------
   5. Form Validation Shake Animation
   --------------------------------------------------------------------------- */

@keyframes validationShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Apply shake to inputs with .input-error class (animations ON only) */
[data-animations="on"] .input-error,
[data-animations="on"] input:invalid:not(:placeholder-shown).touched {
  animation: validationShake 0.4s ease-out;
  border-color: var(--color-danger, #ef4444) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Animations OFF: Just show border color, no shake */
[data-animations="off"] .input-error,
[data-animations="off"] input:invalid:not(:placeholder-shown).touched {
  border-color: var(--color-danger, #ef4444) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* ---------------------------------------------------------------------------
   6. Empty State Styling
   --------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  color: var(--color-muted);
}

.empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.5;
  color: var(--color-accent);
}

.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.empty-state__description {
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 280px;
}

/* Subtle entrance animation for empty state (animations ON only) */
@keyframes emptyStateEntrance {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-animations="on"] .empty-state {
  animation: emptyStateEntrance 0.3s ease-out;
}

/* ---------------------------------------------------------------------------
   7. Panel/View Transition Effects - 3D CAROUSEL ORBIT
   --------------------------------------------------------------------------- */

/*
 * 3D Carousel Orbit Animation System:
 * - Panels rotate around a vertical Y-axis like a carousel/card deck
 * - Outgoing panel swings away to the side with rotateY
 * - Incoming panel swings in from the opposite side
 * - Creates a spinning/orbiting feel through 3D space
 */

/* Easing and timing variables */
:root {
  --ease-panel: cubic-bezier(0.22, 0.61, 0.36, 1); /* Smooth deceleration */
  --panel-transition-duration: 1.3s; /* 2x slower */
  --panel-perspective: 1000px;
}

/* Add perspective to panel containers for true 3D carousel
   CRITICAL: Must override contain, transform, and backface-visibility
   which are set on base columns for performance but flatten 3D space */
[data-animations="on"] .editor-column,
[data-animations="on"] .viewer-column {
  perspective: var(--panel-perspective);
  perspective-origin: center center;
  transform-style: preserve-3d;
  /* Override flattening properties from base column styles */
  contain: none !important;
  transform: none !important;
  backface-visibility: visible !important;
  /* Ensure 3D transforms aren't clipped */
  overflow: visible !important;
}

/* Panel slots need their own perspective since it doesn't inherit
   Also preserve 3D and ensure no flattening */
[data-animations="on"] .panel-slot {
  perspective: var(--panel-perspective);
  perspective-origin: center center;
  transform-style: preserve-3d;
  overflow: visible !important;
}

/* Base panel setup for 3D carousel transforms */
[data-animations="on"] .workspace-panel {
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  /* Override base CSS variable transforms - use explicit transforms instead */
  --workspace-translate-x: 0px;
  --workspace-translate-y: 0px;
  --workspace-translate-z: 0px;
  --workspace-rotate-x: 0deg;
  --workspace-rotate-y: 0deg;
}

/* Preview panels: slightly recessed */
[data-animations="on"] .workspace-panel--preview {
  opacity: 0.9;
  transform: scale(0.95) translateZ(-50px);
  filter: brightness(0.92);
  z-index: 1;
}

/* Active panel: front and center */
[data-animations="on"] .workspace-panel--active {
  opacity: 1;
  transform: scale(1) translateZ(0);
  filter: brightness(1);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* Simple transition-based view switching */

/* All panels can transition */
[data-animations="on"] .workspace-panel {
  transition: transform var(--panel-transition-duration) var(--ease-panel),
              opacity var(--panel-transition-duration) var(--ease-panel),
              filter var(--panel-transition-duration) var(--ease-panel);
}

/* Exiting panel starts small, then transitions to normal preview size */
[data-animations="on"] .workspace-panel.vw-start-small {
  transform: scale(0.88) translateZ(-70px) !important;
  opacity: 0.7 !important;
  filter: brightness(0.85) !important;
  transition: none !important;
}

/* Exiting panel uses 1.5s transition */
[data-animations="on"] .workspace-panel.vw-exiting {
  transition: transform 1.5s var(--ease-panel),
              opacity 1.5s var(--ease-panel),
              filter 1.5s var(--ease-panel) !important;
}

/* Entering panel starts at preview size, then transitions to active */
[data-animations="on"] .workspace-panel.vw-start-preview {
  transform: scale(0.95) translateZ(-50px) !important;
  opacity: 0.9 !important;
  filter: brightness(0.92) !important;
  transition: none !important;
}

/* Entering panel uses 1s transition */
[data-animations="on"] .workspace-panel.vw-entering {
  transition: transform 1s var(--ease-panel),
              opacity 1s var(--ease-panel),
              filter 1s var(--ease-panel) !important;
}

/* Preview hover: lift slightly */
@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .workspace-panel--preview:hover {
    opacity: 1;
    transform: scale(0.97) translateZ(-30px);
    filter: brightness(1);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
    transition: all 0.2s var(--ease-panel);
    z-index: 2;
  }
}

/* Animations OFF: No effects */
[data-animations="off"] .workspace-panel,
[data-animations="off"] .workspace-panel--preview,
[data-animations="off"] .workspace-panel--active {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
  filter: none;
  box-shadow: none;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .workspace-panel,
  .workspace-panel--preview,
  .workspace-panel--active {
    transition: opacity 0.15s ease !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---------------------------------------------------------------------------
   8. Button Press Feedback
   --------------------------------------------------------------------------- */

/* Subtle scale down on button press (animations ON only) */
@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .btn:active,
  [data-animations="on"] .btn-primary:active,
  [data-animations="on"] .btn-secondary:active {
    transform: scale(0.97);
  }
}

[data-animations="off"] .btn:active,
[data-animations="off"] .btn-primary:active,
[data-animations="off"] .btn-secondary:active {
  transform: none;
}

/* ---------------------------------------------------------------------------
   9. Modal Entrance Animation Enhancement
   --------------------------------------------------------------------------- */

@keyframes modalEntranceSubtle {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[data-animations="on"] .modal:not(.hidden) .modal-content {
  animation: modalEntranceSubtle 0.2s ease-out;
}

/* Animations OFF: No modal animation */
[data-animations="off"] .modal .modal-content {
  animation: none;
}

/* ---------------------------------------------------------------------------
   10. Chip Hover Enhancement
   --------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-animations="on"] .text-chip:hover {
    transform: translateY(-1px);
  }

  [data-animations="on"] .text-chip:active {
    transform: translateY(0) scale(0.98);
  }
}

[data-animations="off"] .text-chip:hover,
[data-animations="off"] .text-chip:active {
  transform: none;
}

/* ==========================================================================
   End UX Polish: Animation-Aware Micro-Interactions
   ========================================================================== */

/* Inner tab buttons - Pills/Chips style (28px) */
.data-inner-tab-btn,
.media-inner-tab-btn {
  flex: 0 0 auto;
  padding: 4px 14px;
  border-radius: 14px;
  height: 28px;
  min-height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.data-inner-tab-btn:hover,
.data-inner-tab-btn:focus,
.media-inner-tab-btn:hover,
.media-inner-tab-btn:focus {
  background: var(--interactive-bg-hover);
  color: var(--color-text);
}

.data-inner-tab-btn.active,
.media-inner-tab-btn.active {
  background: var(--interactive-bg-active);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.editor-column {
  grid-area: editor;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  height: 100%;
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: width var(--panel-motion-duration) var(--panel-motion-ease);
  will-change: width;
  position: relative;
  z-index: 3; /* Above sidebar (z-index: 2) so editor covers it during expand animation */
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mode-selector {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-panel);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    position: relative;
    overflow: visible;
    transition: box-shadow 0.3s ease, background 0.25s ease, border-color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
    z-index: 10;
  }

  /* Idle/dormant state - subtle white glow with gentle breathing */
  .mode-selector.ai-dormant,
  .mode-selector:not(.ai-listening):not(.ai-thinking):not(.ai-speaking):not(.ai-error) {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(255, 255, 255, 0.1);
    animation: modeSelectorBreathing 3s ease-in-out infinite;
  }

  @keyframes modeSelectorBreathing {
    0%, 100% {
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(255, 255, 255, 0.1);
    }
    50% {
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.25), 0 6px 16px rgba(255, 255, 255, 0.15);
    }
  }

  /* Force the Mixx AI badge to render at a consistent size */
  .mode-selector .ai-btn {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
  }
  
  .mode-selector.ai-active {
    box-shadow: var(--shadow-glow);
    background: var(--interactive-bg-active);
    border-color: var(--interactive-border-active);
  }
  
  .mode-selector.ai-active::before,
  .mode-selector.ai-active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--interactive-border-active);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
  }
  
  .mode-selector.ai-active::before {
    animation: aiButtonPulse 1.6s ease-out infinite;
  }
  
  .mode-selector.ai-active::after {
    animation: aiButtonPulse 1.6s ease-out infinite;
    animation-delay: 0.45s;
  }
  
  .ai-pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    display: inline-flex;
    margin-right: 10px;
    position: relative;
    box-shadow: var(--shadow-glow);
  }
  
  .ai-pulse-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(90, 139, 255, 0.55);
    opacity: 0;
    animation: aiPulseDot 1.6s ease-out infinite;
  }
  
.view-switcher-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  background: var(--color-panel);
  border-radius: 999px;
  padding: 6px;
  border: 1px solid var(--color-border);
  justify-content: center;
}

.view-switcher-row button {
  min-width: 46px;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 500;
  transition: background var(--transition), color var(--transition), border var(--transition);
}

.view-switcher-row button.active {
  background: var(--interactive-bg-active);
  color: var(--color-text);
  border: 1px solid var(--interactive-border-active);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.95rem;
}

.timeline-caption {
  margin: 0;
  font-size: 0.9rem;
  color: var(--timeline-caption-text);
}

.panel-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.viewer-column {
  grid-area: viewer;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 18px;
  contain: layout style;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: width var(--panel-motion-duration) var(--panel-motion-ease);
  will-change: width;
}

.panel-slot--viewer {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  transform-style: preserve-3d;
  perspective: inherit;
  position: relative;
  pointer-events: none;
}

.panel-slot--viewer > * {
  pointer-events: auto;
}

.panel-slot--viewer > .workspace-panel {
  flex: 1;
  min-height: 0;
}

.panel-slot--editor > .workspace-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel-slot--editor {
  transform-style: preserve-3d;
  perspective: inherit;
  position: relative;
}

.workspace-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  --workspace-translate-x: 0px;
  --workspace-translate-y: 0px;
  --workspace-translate-z: 0px;
  --workspace-rotate-x: 0deg;
  --workspace-rotate-y: 0deg;
  transform: translate3d(var(--workspace-translate-x), 0px, var(--workspace-translate-z))
    rotateX(var(--workspace-rotate-x))
    rotateY(var(--workspace-rotate-y));
  transition:
    transform var(--panel-motion-duration) var(--panel-motion-ease),
    filter var(--panel-motion-duration) var(--panel-motion-ease),
    opacity var(--panel-motion-duration) var(--panel-motion-ease),
    box-shadow var(--panel-motion-duration) var(--panel-motion-ease);
  will-change: transform, filter, opacity;
  pointer-events: auto;
}

/* View Switching - No animations when Enhanced mode is OFF */
[data-animations="off"] .workspace-panel--active,
:not([data-animations]) .workspace-panel--active {
  transform: none;
  opacity: 1;
}

[data-animations="off"] .workspace-panel--preview,
:not([data-animations]) .workspace-panel--preview {
  transform: none;
  opacity: 1;
}

[data-animations="off"] .workspace-panel--preview-top,
:not([data-animations]) .workspace-panel--preview-top {
  transform: none;
}

[data-animations="off"] .workspace-panel--preview-bottom,
:not([data-animations]) .workspace-panel--preview-bottom {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --layout-perspective: none;
  }
  .workspace-panel {
    transition: none !important;
    --workspace-translate-x: 0px !important;
    --workspace-translate-y: 0px !important;
    --workspace-translate-z: 0px !important;
    --workspace-rotate-x: 0deg !important;
    --workspace-rotate-y: 0deg !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .workspace-panel--active,
  .workspace-panel--preview,
  .workspace-panel--preview-top,
  .workspace-panel--preview-bottom {
    box-shadow: inherit !important;
  }
  /* AI pulse animations */
  .mode-selector.ai-active::before,
  .mode-selector.ai-active::after,
  .ai-pulse-dot::after {
    animation: none !important;
    opacity: 0;
  }
  /* Attachment animations */
  .attachment-card,
  .attachment-action-btn,
  .attachment-overflow-toggle,
  .attachment-progress-bar,
  .attachment-thumbnail .progress-spinner {
    transition: none;
    animation: none;
  }
}

.map-panel {
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: transparent;
  --map-header-height: 56px;
  pointer-events: auto;
}

.map-panel .panel-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 12px 12px;
  background-color: rgba(17, 17, 22, 0.15);
  backdrop-filter: blur(6px);
  z-index: 1200;
  pointer-events: auto;
}

#map3dPanel .panel-header {
  padding: 8px 18px;
}

.map-panel .map-panel-body {
  background: transparent;
  border: none;
  border-radius: 0;
}

#map3dPanel {
  --map-header-height: 48px;
}

.map-panel .map-toolbar {
  top: calc(8px + var(--map-header-height));
}

.map-panel .timeline-pill {
  top: calc(4px + var(--map-header-height));
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(231, 233, 234, 0.75);
}

[data-theme="light"] .panel-badge {
  color: var(--color-text-strong);
}

.panel-lock-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--interactive-border);
  transition: background var(--transition), color var(--transition);
}

.panel-lock-btn:hover {
  background: var(--interactive-bg-hover);
  color: var(--color-text);
}

/* 3D Layer Selector */
.layer-selector-wrapper {
  position: relative;
  display: inline-flex;
}

.panel-layer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  background: var(--color-panel);
  border: 1px solid var(--interactive-border);
  color: var(--color-text);
  font-size: 16px;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}

.panel-layer-btn:hover {
  background: var(--interactive-bg-hover);
}

.panel-layer-btn[aria-expanded="true"] {
  background: var(--interactive-bg-hover);
  border-color: var(--color-primary);
}

.layer-label {
  font-weight: 500;
  white-space: nowrap;
}

.layer-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 4px;
  z-index: 1000;
}

.layer-dropdown-menu.hidden {
  display: none;
}

.layer-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
}

.layer-option:hover {
  background: var(--interactive-bg-hover);
}

.layer-option.active {
  background: var(--color-primary-alpha);
  color: var(--color-primary);
}

.layer-option i {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.layer-option span {
  font-weight: 500;
  display: block;
}

.layer-option small {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

.text-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-author-area {
  flex: 1;
  min-height: 0;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  overflow-y: auto;
  line-height: 1.6;
}

.text-author-area.readonly {
  opacity: 0.7;
}

.map-panel-body {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--color-panel);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 0;
  display: flex;
  overflow: hidden;
  pointer-events: auto;
}

.map-canvas {
  flex: 1;
  position: relative;
  pointer-events: auto;
}

.map-toolbar-shell {
  display: contents;
}

.map-toolbar {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #2c3240;
  background: rgba(21, 25, 34, 0.72);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

[data-theme="light"] .map-toolbar {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #d6d9e0;
  box-shadow: 0 6px 22px rgba(34, 46, 80, 0.08);
}

.map-toolbar--3d {
  left: 16px;
  right: auto;
}

.panel-slot--viewer .map-toolbar {
  display: none;
}

.panel-slot--viewer .map-surface,
.panel-slot--viewer .map-canvas,
.panel-slot--viewer .map-panel-body {
  pointer-events: auto !important;
}

.panel-slot--editor .map-toolbar {
  display: flex;
}

.map-toolbar.legacy-toolbar-hidden {
  display: none !important;
}

.map-nav-3d {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 1005;
}

.map-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--overlay-bg);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
}

.map-nav-btn:hover,
.map-nav-btn:focus {
  background: var(--interactive-bg-hover);
  transform: translateY(-1px);
}

.panel-slot--viewer.active-on-left::after {
  content: 'Active on left';
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--interactive-bg-active);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.map-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(31, 36, 48, 0.86);
  color: #d7deed;
  border: 1px solid #2f3545;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  padding: 0;
  cursor: pointer;
}

.map-tool-btn:hover {
  background: rgba(38, 44, 59, 0.92);
  border-color: #3a4255;
}

.map-tool-btn.active {
  background: #58a6ff;
  color: #0d1117;
  border-color: #3f8ae0;
}

.map-tool-btn:active {
  transform: scale(0.96);
}

.map-tool-btn:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
}

[data-theme="light"] .map-tool-btn {
  background: rgba(246, 247, 251, 0.86);
  color: #2a3142;
  border: 1px solid #e4e6ef;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .map-tool-btn:hover {
  background: rgba(233, 236, 246, 0.92);
  border-color: #cdd3e3;
}

[data-theme="light"] .map-tool-btn.active {
  background: #2a6df2;
  color: #ffffff;
  border-color: #1f5dda;
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.1);
}

[data-theme="light"] .map-tool-btn:focus-visible {
  outline-color: #2a6df2;
}

.map-surface {
  width: 100%;
  height: 100%;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  touch-action: auto !important;
}

#cesiumContainer,
#cesiumContainer *,
#leafletMap,
#leafletMap * {
  pointer-events: auto !important;
  touch-action: auto !important;
}

.cesium-viewer,
.cesium-viewer-cesiumWidgetContainer,
.cesium-widget canvas {
  pointer-events: auto !important;
  touch-action: auto !important;
}

.timeline-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background: rgba(24, 24, 32, 0.92);
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--color-text);
  z-index: 1300;
  height: 40px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(90,139,255,0.18);
}

[data-theme="light"] .timeline-pill {
  background: linear-gradient(135deg, #ffffff, #eef2ff);
  color: var(--color-text);
  border: 1px solid rgba(48, 62, 110, 0.2);
  box-shadow: 0 6px 18px rgba(15, 24, 64, 0.14);
}

/* Harmonize editor panel layout to prevent vertical jump */
.workspace-panel.center-active {
  min-height: 520px;
  padding: 0;
}
.workspace-panel.center-active .panel-header {
  position: relative;
  height: 56px;
  padding: 10px 18px;
  background: rgba(17, 17, 22, 0.15);
  border-radius: var(--radius-lg) var(--radius-lg) 12px 12px;
  backdrop-filter: blur(6px);
  z-index: 1200;
}
.workspace-panel.center-active .map-panel-body,
.workspace-panel.center-active .text-panel-body {
  flex: 1;
  min-height: 0;
  background: var(--color-panel);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 0;
  display: flex;
  overflow: hidden;
}

/* CONSOLIDATED @media (max-width: 1280px) - merged with block at line ~3074 */

@media (max-width: 1024px) {
  :root {
    --nav-pad: 0 20px;
    --nav-gap: 12px;
    --layout-gap: 18px;
    --layout-padding: 18px;
    --layout-columns: 1fr;
    --layout-areas: "editor" "viewer";
    --nav-center-order: 3;
    --nav-center-width: 100%;
  }
  .viewer-column,
  .panel-slot--viewer { gap: 18px; }
}

@media (max-width: 640px) {
  :root {
    --nav-pad: 12px 18px;
    --nav-gap: 12px;
    --nav-height: auto;
    --layout-gap: 14px;
    --layout-padding: 14px;
    --sidebar-pad: 18px;
    --card-pad: 16px;
  }
}

.modal {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  padding: clamp(18px, 4vh, 40px) clamp(12px, 4vw, 40px);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  overflow-y: auto;
}

/* Modal shell (consolidated) */
.modal-content {
  background: var(--modal-bg, var(--surface-elevated));
  border-radius: var(--modal-radius, var(--radius-lg));
  box-shadow: var(--modal-shadow, var(--shadow-elevated));
  padding: var(--modal-pad, 20px 22px);
  max-width: var(--modal-max-width, 720px);
  width: var(--modal-width, auto);
  max-height: var(--modal-max-height, calc(100vh - 120px));
  overflow: auto;
}

/* Size variants (keeps intent explicit) */
.modal-content--compact { --modal-pad: 16px 18px; --modal-max-width: 640px; }
.modal-content--large   { --modal-pad: 24px 28px; --modal-max-width: 880px; }

/* POI modal specific width */
#poi-modal .modal-content {
  --modal-max-width: var(--poi-modal-max-width);
  --modal-pad: var(--poi-modal-pad);
  --modal-radius: var(--poi-modal-radius, var(--modal-radius, var(--radius-lg)));
}

/* Modal scrollbar styling */
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb, rgba(90, 139, 255, 0.35));
  border-radius: 999px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover, rgba(90, 139, 255, 0.5));
}
.modal-content::-webkit-scrollbar-track {
  background: var(--scroll-track, rgba(255, 255, 255, 0.08));
}

@media (max-height: 820px) {
  .modal {
    align-items: flex-start;
    padding-top: clamp(12px, 4vh, 32px);
  }
}

#poi-picker-modal .modal-content,
.modal-content--themed {
  background: linear-gradient(165deg, rgba(24, 24, 31, 0.72) 0%, rgba(14, 15, 24, 0.68) 100%);
  border: 1.5px solid rgba(118, 137, 255, 0.18);
  box-shadow: 0 24px 58px rgba(12, 14, 32, 0.45);
  width: min(1200px, 96vw);
  padding: 14px 16px 12px;
  align-items: stretch;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 14px;
  max-height: min(82vh, 760px);
  overflow-y: auto;
  margin-top: clamp(12px, 4vh, 28px);
}

[data-theme="light"] #poi-modal .modal-content,
[data-theme="light"] #poi-picker-modal .modal-content,
[data-theme="light"] .modal-content--themed {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 250, 252, 0.88) 100%);
  border: 1.5px solid rgba(90, 139, 255, 0.22);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Profile Settings Modal - Tabbed Layout
   ============================================ */
#profile-settings-modal .modal-content {
  width: min(520px, 94vw);
  max-height: 85vh;
  overflow: hidden;
}

#profile-settings-modal .modal-content--wide {
  width: min(520px, 94vw);
}

#profile-settings-modal .modal-body {
  gap: 0;
  padding: 0;
  align-items: stretch;
  overflow-y: auto;
  max-height: calc(85vh - 140px);
}

#profile-settings-modal .modal-body--tabs {
  padding: 0;
}

/* Settings Tabs */
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

.settings-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.settings-tab:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

.settings-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  background: transparent;
}

.settings-tab i {
  font-size: 1rem;
}

/* Settings Panels */
.settings-panel {
  display: none;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.settings-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#profile-settings-modal .error-message,
#profile-settings-modal .success-message {
  margin: 8px 16px;
  padding: 8px 12px;
  font-size: 0.8rem;
  border-radius: 6px;
}

#profile-settings-modal .modal-header {
  padding: 14px 18px;
  font-size: 1.05rem;
  border-bottom: none;
}

#profile-settings-modal .modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
}

#profile-settings-modal .field {
  margin-bottom: 12px;
}

#profile-settings-modal .field label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

#profile-settings-modal .form-control {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.85rem;
}

#profile-settings-modal .password-section-header {
  margin: 14px 0 10px 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

#profile-settings-modal .password-section-header h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

#profile-settings-modal .password-section-header .optional {
  font-weight: normal;
  color: var(--color-muted);
  font-size: 0.75rem;
}

#profile-settings-modal form {
  width: 100%;
}

#profile-settings-modal .danger-zone {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  width: 100%;
}

#profile-settings-modal .danger-zone h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: #ef4444;
}

#profile-settings-modal .danger-zone p {
  font-size: 0.8rem;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--color-muted);
}

#profile-settings-modal .btn-danger {
  padding: 8px 14px;
  font-size: 0.8rem;
}

/* Preferences Panel Styles */
.preferences-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

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

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

.preferences-content.hidden {
  display: none;
}

.preferences-section {
  margin-bottom: 20px;
}

.preferences-section:last-of-type {
  margin-bottom: 16px;
}

.preferences-section h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.preferences-section h4 i {
  font-size: 0.9rem;
}

.preference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light, rgba(255,255,255,0.06));
}

.preference-item:last-child {
  border-bottom: none;
}

.preference-item label {
  font-size: 0.85rem;
  color: var(--color-text);
  flex: 1;
}

.preference-item .form-select {
  width: auto;
  min-width: 140px;
  padding: 6px 28px 6px 10px;
  font-size: 0.8rem;
  background-position: right 8px center;
}

.preference-item--toggle {
  padding: 10px 0;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border);
  transition: 0.2s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-accent);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px var(--color-accent-faded, rgba(90, 139, 255, 0.3));
}

/* Preferences Reset */
.preferences-reset {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.preferences-reset .btn-secondary {
  font-size: 0.8rem;
  padding: 8px 16px;
}

/* ============================================
   Delete Account Modal Styles
   ============================================ */
.delete-account-modal {
  max-width: 480px;
  width: 90vw;
}

.delete-account-modal .modal-header h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  color: var(--color-text);
}

.delete-account-modal .modal-subtitle {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0;
  font-weight: 400;
}

/* Choose options */
.delete-choose-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.delete-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.delete-choice-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
}

.delete-choice-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.delete-choice-btn i {
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.delete-choice-btn span {
  font-weight: 600;
  color: var(--color-text);
  font-size: 1rem;
}

.delete-choice-btn small {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.delete-choice-btn--danger:hover {
  border-color: var(--color-danger);
  background: rgba(239, 68, 68, 0.08);
}

.delete-choice-btn--danger i {
  color: var(--color-danger);
}

/* Reason chips */
.delete-reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}

.delete-reason-chip {
  padding: 8px 16px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  color: var(--color-text);
}

.delete-reason-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
}

.delete-reason-chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.delete-reason-chip.selected {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.delete-reason-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 80px;
}

.delete-reason-textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.delete-reason-textarea::placeholder {
  color: var(--color-muted);
}

/* Warning box */
.delete-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  margin-bottom: 20px;
  width: 100%;
}

.delete-warning i {
  color: var(--color-danger);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.delete-warning p {
  margin: 0;
  color: var(--color-text);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Confirm input */
.delete-confirm-input {
  width: 100%;
}

.delete-confirm-input label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-text);
  font-size: 0.95rem;
}

.delete-confirm-input label strong {
  font-family: monospace;
  background: var(--color-bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.delete-confirm-input input {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: monospace;
}

.delete-confirm-input input:focus {
  border-color: var(--color-danger);
  outline: none;
}

.delete-error {
  color: var(--color-danger);
  font-size: 0.9rem;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  width: 100%;
}

/* Goodbye modal */
.delete-goodbye-message {
  text-align: center;
  padding: 20px 0;
  width: 100%;
}

.delete-goodbye-message i {
  font-size: 3rem;
  color: var(--color-success);
  margin-bottom: 16px;
  display: block;
}

.delete-goodbye-message p {
  margin: 0 0 8px;
  color: var(--color-text);
  font-size: 1rem;
}

.delete-goodbye-info {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.delete-receipt-download {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  width: 100%;
}

.delete-receipt-download .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Light theme adjustments */
[data-theme="light"] .delete-choice-btn {
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .delete-choice-btn:hover {
  background: rgba(90, 139, 255, 0.08);
}

[data-theme="light"] .delete-reason-chip {
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .delete-reason-chip.selected {
  background: rgba(90, 139, 255, 0.15);
}

[data-theme="light"] .delete-reason-textarea,
[data-theme="light"] .delete-confirm-input input {
  background: rgba(255, 255, 255, 0.9);
}

#poi-picker-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 0.96rem;
  align-items: stretch;
  max-height: 60vh;
  overflow-y: auto;
  padding-bottom: 4px;
}

.poi-picker-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 0.92rem;
  width: 100%;
}

/* CONSOLIDATED @media (max-width: 700px) for #poi-modal - see line ~885 */

#poi-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.96rem;
  align-items: stretch;
  max-height: 60vh;
  overflow-y: auto;
  padding-bottom: 4px;
}
.modal-header {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 18px;
  gap: 10px;
}

.modal-header h2,
.modal-header h3 {
  font-size: 1.15rem;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 0.9rem;
}

.modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-footer .btn,
.modal-footer button {
  padding: 8px 14px;
  font-size: 0.9rem;
}

/* Share Modal Styles */
.share-section {
  margin-bottom: 1.5rem;
}

.share-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.share-input-group input {
  flex: 1;
}

.share-input-group select {
  min-width: 120px;
}

.share-collaborators {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  max-height: 300px;
  overflow-y: auto;
}

.share-collaborator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.share-collaborator-item:last-child {
  border-bottom: none;
}

.share-collaborator-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.share-collaborator-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.share-collaborator-email {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.share-collaborator-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.permission-select {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-panel);
  color: var(--color-text);
  font-size: 0.875rem;
}

.btn-icon-danger {
  background: transparent;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.btn-icon-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Collaboration Styles */
.collab-section {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.collab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.collab-header h3 {
  margin: 0;
  font-size: 1rem;
}

.collab-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-bg);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.collab-status--active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: #10b981;
}

.collab-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.collab-invite {
  margin-bottom: 1rem;
}

.collab-invite label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
}

.collab-invite-group {
  display: flex;
  gap: 0.5rem;
}

.collab-invite-group input {
  flex: 1;
  font-family: monospace;
  font-size: 0.85rem;
}

.collab-help-text {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.collab-users {
  margin-top: 1rem;
}

.collab-users h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
}

.collab-users-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  max-height: 150px;
  overflow-y: auto;
}

.collab-user-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.collab-user-item:last-child {
  border-bottom: none;
}

.collab-user-item i {
  color: var(--color-accent);
}

.collab-user-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* POI action bar (consolidated) */
.poi-actions {
  display: flex;
  flex-direction: var(--poi-direction, row);
  align-items: var(--poi-align, center);
  justify-content: var(--poi-justify, flex-end);
  gap: var(--poi-gap, 12px);
  margin-top: var(--poi-margin-top, 18px);
}

.poi-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.poi-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 14px;
  align-items: start;
}

.poi-field--col-full {
  grid-column: 1 / -1;
}

.poi-coordinates-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.poi-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(18, 19, 28, 0.75);
  border: 1px solid rgba(90, 139, 255, 0.14);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.poi-field:hover {
  border-color: rgba(90, 139, 255, 0.28);
  box-shadow: 0 8px 18px rgba(24, 27, 48, 0.28);
}

[data-theme="light"] .poi-field {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 28px rgba(15, 24, 64, 0.08);
}

[data-theme="light"] .poi-field:hover {
  border-color: var(--interactive-border-hover);
  box-shadow: 0 12px 30px rgba(15, 24, 64, 0.12);
}

.poi-field-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(240, 242, 255, 0.72);
}

[data-theme="light"] .poi-field-label {
  color: var(--color-text-strong);
}

.poi-field-optional {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(240, 242, 255, 0.5);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: normal;
}

[data-theme="light"] .poi-field-optional {
  color: var(--color-muted);
}

.poi-coordinates-grid .poi-field {
  height: 100%;
}

.poi-coordinates-grid .poi-reposition-btn {
  align-self: stretch;
}

.poi-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.poi-field--wide {
  padding: 8px 8px;
}

#poi-modal input,
#poi-modal textarea,
#poi-modal select {
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-input-border);
  border-radius: 8px;
}

#poi-modal input:focus,
#poi-modal textarea:focus,
#poi-modal select:focus {
  border-color: var(--color-accent, #5a8bff);
  outline: none;
}

#poi-modal textarea {
  min-height: 60px;
  resize: vertical;
  line-height: 1.4;
}

/* Category dropdown styling */
#poi-modal select#poi-category {
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a8bff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}

#poi-modal select#poi-category:hover {
  border-color: rgba(90, 139, 255, 0.5);
}

#poi-modal select#poi-category option {
  background: var(--color-input-bg);
  color: var(--color-text);
  padding: 8px;
}

#poi-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  color: var(--color-text);
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

#poi-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

[data-theme="light"] #poi-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.7;
}

[data-theme="light"] #poi-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.poi-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px;
}

.poi-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 700;
  background: linear-gradient(140deg, #1dbf73 0%, #18a864 100%);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(29, 191, 115, 0.3);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.poi-save-btn:hover,
.poi-save-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(29, 191, 115, 0.42);
}

.poi-save-btn i {
  font-size: 1.1rem;
  color: inherit;
}

.poi-reposition-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(90, 139, 255, 0.35);
  background: rgba(28, 30, 45, 0.76);
  color: rgba(148, 176, 255, 0.95);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.poi-reposition-btn:hover,
.poi-reposition-btn:focus {
  border-color: rgba(90, 139, 255, 0.6);
  background: rgba(40, 42, 64, 0.92);
  color: #bfd1ff;
  transform: translateY(-1px) scale(1.02);
}

.poi-reposition-btn i {
  font-size: 1.1rem;
}

[data-theme="light"] .poi-reposition-btn {
  background: #ffffff;
  border-color: rgba(59, 130, 246, 0.35);
  color: var(--color-accent);
  box-shadow: 0 10px 26px rgba(15, 24, 64, 0.12);
}

[data-theme="light"] .poi-reposition-btn:hover,
[data-theme="light"] .poi-reposition-btn:focus {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.5);
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .poi-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .poi-coordinates-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-auto-rows: 1fr;
  }

  .poi-coordinates-grid .poi-reposition-btn {
    width: 100%;
  }
}

.poi-cancel-btn {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid rgba(90, 139, 255, 0.2);
  background: transparent;
  color: rgba(240, 242, 255, 0.78);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.poi-cancel-btn:hover,
.poi-cancel-btn:focus {
  background: rgba(90, 139, 255, 0.16);
  border-color: rgba(90, 139, 255, 0.45);
  color: #f4f6ff;
}

[data-theme="light"] .poi-cancel-btn {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="light"] .poi-cancel-btn:hover,
[data-theme="light"] .poi-cancel-btn:focus {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--color-text-strong);
}

@media (max-width: 540px) {
  :root {
    --poi-modal-pad: 24px 20px 22px;
  }

  .poi-field-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .poi-actions { --poi-justify: space-between; }
}

.poi-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.22s ease, transform 0.18s ease;
  box-shadow: var(--shadow-soft);
}

.poi-list-item.active {
  background: var(--interactive-bg-active);
  border-color: var(--interactive-border-active);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.poi-list-item.active .poi-badge,
.poi-list-item.active .poi-coords {
  color: var(--color-text);
}
.poi-list-item:hover,
.poi-list-item:focus-visible {
  background: var(--interactive-bg-hover);
  border-color: var(--interactive-border-hover);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  outline: none;
}
/* Info Tab Styles */
.info-tab {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 12px;
  overflow-x: hidden;
}
.info-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.info-label {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 2px;
}
.info-title {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
}
.info-title.field-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger);
}
.info-location {
  font-size: 1rem;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
}
.info-thumbnail {
  margin-bottom: 12px;
  width: 100%;
  max-width: 220px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--color-accent);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.info-thumbnail:focus,
.info-thumbnail:hover {
  box-shadow: 0 0 0 3px var(--color-accent);
}
.info-description {
  margin-top: 2px;
  min-height: 60px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  resize: vertical;
}
.info-categories {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.category-chip {
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-right: 4px;
  letter-spacing: 0.01em;
}
.info-status {
  margin: 0;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--status-default-bg);
  color: var(--status-default-text);
  border: 1px solid var(--status-default-border);
}
.info-status.draft {
  background: var(--status-draft-bg);
  color: var(--status-draft-text);
}
.info-status.published {
  background: var(--status-published-bg);
  color: var(--status-published-text);
}
.field-error-message {
  color: var(--color-danger);
  font-size: 0.92rem;
  margin-top: 2px;
}

/* ============================================
   Info Page / Experience Orientation Section
   ============================================ */
.info-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  margin: 20px 0 16px 0;
}

.info-section {
  margin-top: 12px;
  padding: 16px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.info-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px 0;
}

.info-section-header::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--color-accent);
  border-radius: 2px;
}

.info-section-helper {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 14px 0;
  padding-left: 11px;
  line-height: 1.4;
}

/* Main enable toggle - styled as switch */
.info-field--toggle {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(90, 139, 255, 0.08);
  border: 1px solid rgba(90, 139, 255, 0.2);
  border-radius: 8px;
}

.info-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text);
}

/* Custom toggle switch */
.info-toggle-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 20px;
  background: var(--color-border);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.info-toggle-label input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.info-toggle-label input[type="checkbox"]:checked {
  background: var(--color-accent);
}

.info-toggle-label input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.info-toggle-text {
  font-size: 0.9rem;
}

/* Collapsible content area */
.info-page-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.info-page-content.hidden {
  display: none;
}

/* Fieldset cards */
.info-fieldset {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 14px 12px;
  margin: 0;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.info-fieldset:focus-within {
  border-color: rgba(90, 139, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.08);
}

.info-fieldset-legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 0 8px;
  margin-left: -4px;
}

/* Legend toggle - mini switch style */
.info-toggle-label--legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}

.info-toggle-label--legend span {
  transition: color 0.2s ease;
}

.info-toggle-label--legend:has(input:not(:checked)) span {
  color: var(--color-text-muted);
}

.info-toggle-label--legend input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  background: var(--color-border);
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.info-toggle-label--legend input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.info-toggle-label--legend input[type="checkbox"]:checked {
  background: var(--color-accent);
}

.info-toggle-label--legend input[type="checkbox"]:checked::after {
  transform: translateX(14px);
}

.info-toggle-label--legend input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Disabled fieldset content when toggle is off */
.info-fieldset:has(.info-toggle-label--legend input:not(:checked)) > div:not(legend) {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.3);
}

.info-fieldset .info-field {
  margin-bottom: 10px;
}

.info-fieldset .info-field:last-child {
  margin-bottom: 0;
}

.info-field-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 3px;
}

/* Mode toggle (Bullets/Paragraphs) */
.info-field--mode-toggle {
  display: inline-flex;
  gap: 0;
  margin-bottom: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px;
}

.info-radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  padding: 5px 12px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.info-radio-label:has(input:checked) {
  background: var(--color-accent);
  color: white;
}

.info-radio-label input[type="radio"] {
  display: none;
}

/* Bullet inputs */
#info-page-why-bullets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#info-page-why-bullets input {
  padding: 8px 12px 8px 28px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 0.85rem;
  position: relative;
}

#info-page-why-bullets input::placeholder {
  color: var(--color-text-muted);
}

#info-page-why-bullets input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 139, 255, 0.15);
}

/* Bullet point visual indicator */
.info-field:has(#info-page-why-bullets) {
  position: relative;
}

#info-page-why-bullets input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='3' fill='%235a8bff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

/* Theme Cards */
.info-page-themes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.info-page-themes-list:empty {
  display: none;
}

.info-page-theme-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}

.info-page-theme-card input {
  grid-column: 1;
}

.info-page-theme-card textarea {
  grid-column: 1 / -1;
}

.info-page-theme-card input,
.info-page-theme-card textarea {
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.15);
  color: var(--color-text);
  font-size: 0.85rem;
}

.info-page-theme-card input::placeholder,
.info-page-theme-card textarea::placeholder {
  color: var(--color-text-muted);
}

.info-page-theme-card input:focus,
.info-page-theme-card textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.info-page-theme-card textarea {
  min-height: 44px;
  resize: vertical;
}

.info-page-theme-remove {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.info-page-theme-remove:hover {
  background: var(--color-danger);
  color: white;
}

/* Media Selection */
.info-page-media-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.info-page-media-list:empty {
  display: none;
}

.info-page-media-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.info-page-media-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

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

.info-page-media-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-page-media-caption {
  width: 100%;
  padding: 5px 8px;
  margin-top: 4px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.15);
  color: var(--color-text);
  font-size: 0.8rem;
}

.info-page-media-caption::placeholder {
  color: var(--color-text-muted);
}

.info-page-media-caption:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 139, 255, 0.1);
}

.info-page-media-remove {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.info-page-media-remove:hover {
  background: var(--color-danger);
  color: white;
}

/* Add buttons */
.info-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(90, 139, 255, 0.1);
  border: 1px dashed rgba(90, 139, 255, 0.4);
  border-radius: 6px;
  color: var(--color-accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.info-add-btn:hover {
  background: rgba(90, 139, 255, 0.18);
  border-style: solid;
}

.info-add-btn i {
  font-size: 1rem;
}

.info-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Light theme adjustments for Info Page section */
[data-theme="light"] .info-section {
  background: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .info-field--toggle {
  background: rgba(90, 139, 255, 0.06);
}

[data-theme="light"] .info-fieldset {
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .info-page-theme-card,
[data-theme="light"] .info-page-media-item {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .info-page-theme-card input,
[data-theme="light"] .info-page-theme-card textarea,
[data-theme="light"] #info-page-why-bullets input,
[data-theme="light"] .info-page-media-caption {
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .info-add-btn {
  background: rgba(90, 139, 255, 0.08);
}

[data-theme="light"] .info-add-btn:hover {
  background: rgba(90, 139, 255, 0.15);
}

/* Required indicator */
.required-indicator {
  color: var(--color-danger);
  font-weight: normal;
}

/* Category input styles */
.category-input-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.info-category-input {
  flex: 1;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 0.95rem;
}

.info-category-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.info-add-category-btn {
  flex-shrink: 0;
}

.remove-category-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.remove-category-btn:hover {
  color: #fff;
}

/* Media Tab Styles */
.media-tab {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 12px;
  overflow-x: hidden;
}
.media-uploader {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(150deg, #18181f 0%, #15151c 100%);
  box-shadow: 0 20px 36px rgba(8, 9, 20, 0.32);
}
.media-dropzone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(27, 27, 35, 0.95), rgba(18, 18, 26, 0.95));
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
  outline: none;
  transform: translateY(0);
}
.media-dropzone:focus,
.media-dropzone:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.25), 0 24px 40px rgba(9, 9, 20, 0.45);
  transform: translateY(-2px);
}
.media-dropzone-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(90, 139, 255, 0.28), rgba(90, 139, 255, 0.12));
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 12px 20px rgba(19, 24, 40, 0.35);
}
.media-dropzone-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-dropzone-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.media-dropzone-subtitle {
  font-size: 0.9rem;
  color: rgba(231, 231, 234, 0.72);
}
.media-dropzone-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.media-upload-btn,
.media-url-btn {
  padding: var(--media-btn-pad);
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--media-btn-font);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  transform: translateY(0);
}
.media-url-btn:hover,
.media-url-btn:focus {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.media-layout {
  display: flex;
  gap: 18px;
  min-height: 0;
  width: 100%;
  flex-wrap: wrap;
}
.media-grid-section {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: linear-gradient(150deg, #18181f 0%, #13131a 100%);
  padding: 16px;
  box-shadow: 0 24px 46px rgba(8, 9, 20, 0.36);
  min-width: 0;
}
.media-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.media-grid-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.media-grid-count {
  font-size: 0.8rem;
  color: rgba(231, 231, 234, 0.68);
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(27, 27, 35, 0.96), rgba(16, 16, 24, 0.96));
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
  outline: none;
  transform: translateY(0);
}
.media-card:hover,
.media-card:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.24), 0 18px 36px rgba(9, 10, 22, 0.4);
  transform: translateY(-3px);
}
.media-card.selected {
  border-color: rgba(90, 139, 255, 0.55);
  background: linear-gradient(165deg, rgba(90, 139, 255, 0.22), rgba(22, 24, 40, 0.92));
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.32), 0 26px 48px rgba(14, 18, 36, 0.52);
  transform: translateY(-4px);
}
.media-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: var(--surface-muted);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.media-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-card-thumb.video {
  background: radial-gradient(circle at center, rgba(90, 139, 255, 0.22), rgba(20, 20, 28, 0.92));
  color: #fff;
  font-size: 1.6rem;
}
.media-card-thumb.document {
  background: linear-gradient(135deg, rgba(255, 88, 88, 0.24), rgba(90, 139, 255, 0.1));
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
}
.media-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(90, 139, 255, 0.24);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(90, 139, 255, 0.35);
  box-shadow: 0 6px 12px rgba(10, 13, 24, 0.45);
}
.media-card-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}
.media-card-type {
  font-size: 0.78rem;
  color: rgba(231, 231, 234, 0.68);
}
.media-details {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: linear-gradient(150deg, #18181f 0%, #13131a 100%);
  padding: 16px;
  box-shadow: 0 24px 46px rgba(8, 9, 20, 0.36);
  min-width: 0;
  max-width: 360px;
}
.media-details-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-details-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.media-details-type {
  font-size: 0.85rem;
  color: rgba(231, 231, 234, 0.68);
}
.media-details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-details-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-details-row dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(231, 231, 234, 0.52);
}
.media-details-row dd {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(231, 231, 234, 0.86);
  line-height: 1.35;
}
.media-token {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(27, 27, 35, 0.94), rgba(16, 16, 23, 0.94));
  border: 1px solid rgba(90, 139, 255, 0.22);
  box-shadow: 0 12px 26px rgba(8, 9, 20, 0.35);
}
.media-token code {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  word-break: break-all;
}
.media-token-copy,
.media-secondary-action,
.media-danger-action {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}
.media-token-copy:hover,
.media-token-copy:focus {
  background: rgba(90, 139, 255, 0.18);
  border-color: rgba(90, 139, 255, 0.3);
  color: #fff;
}
.media-details-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.media-secondary-action:hover,
.media-secondary-action:focus {
  background: rgba(255, 255, 255, 0.08);
}
.media-danger-action {
  color: #ffb4c1;
  border-color: rgba(211, 63, 87, 0.35);
  background: rgba(211, 63, 87, 0.16);
}
.media-danger-action:hover,
.media-danger-action:focus {
  background: rgba(211, 63, 87, 0.25);
  color: #fff;
}

body.xr-undocked .workspace-panel {
  transform: translateZ(0) scale(0.98);
  box-shadow: 0 20px 40px var(--xr-panel-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.xr-undocked .panel-slot--editor .workspace-panel {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 48px var(--xr-panel-shadow-elevated);
}

body.xr-undocked .viewer-column .workspace-panel {
  opacity: 0.92;
}

/* POI placement HUD + adjust affordances */
.placement-hud {
  background: var(--xr-hud-bg);
  color: var(--xr-hud-text);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(90, 139, 255, 0.2);
  margin: 12px auto;
  text-align: center;
  z-index: 12;
}

.placement-hud.hidden {
  display: none;
}

.dimmed {
  opacity: 0.4;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.poi-chip-highlight {
  animation: poiChipGlow 1.2s ease-out forwards;
}

@keyframes poiChipGlow {
  0% {
    box-shadow: 0 0 0 rgba(90, 139, 255, 0.4);
  }
  40% {
    box-shadow: 0 0 16px rgba(90, 139, 255, 0.55);
  }
  100% {
    box-shadow: 0 0 0 rgba(90, 139, 255, 0);
  }
}

.poi-actions .btn-adjust-location {
  background: transparent;
  color: #5a8bff;
  border: 1px dashed rgba(90, 139, 255, 0.6);
}

.poi-actions .btn-adjust-location:hover,
.poi-actions .btn-adjust-location:focus {
  background: rgba(90, 139, 255, 0.08);
  color: #3d6ff0;
  border-color: #3d6ff0;
}

@media (max-width: 1100px) {
  .media-layout {
    flex-direction: column;
  }
  .media-details {
    flex: unset;
  }
}

/* Hide Cesium attribution watermark */
.cesium-viewer .cesium-widget-credits,
.cesium-credit-lightbox {
  display: none !important;
}

/* Cesium container sizing - ensures canvas fills panel properly */
#cesiumContainer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Match Mixx loading screen gradient instead of black during Cesium init */
  background: radial-gradient(circle at 30% 20%, rgba(90, 139, 255, 0.15), transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(130, 255, 220, 0.1), transparent 50%),
              #0c0c0d;
}

/* Cesium loading overlay - matches main loading screen */
#cesiumContainer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(90, 139, 255, 0.15), transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(130, 255, 220, 0.1), transparent 50%),
              #0c0c0d;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* Hide overlay once Cesium globe is loaded */
#cesiumContainer.cesium-loaded::before {
  opacity: 0;
  pointer-events: none;
}

/* Cesium loading spinner - centered ring matching main loader */
#cesiumContainer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(90, 139, 255, 0.2);
  border-top-color: #5a8bff;
  border-radius: 50%;
  animation: cesium-loading-spin 1s linear infinite;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

#cesiumContainer.cesium-loaded::after {
  opacity: 0;
}

@keyframes cesium-loading-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #cesiumContainer::after {
    animation: none;
  }
}

#cesiumContainer .cesium-viewer,
#cesiumContainer .cesium-viewer-cesiumWidgetContainer,
#cesiumContainer .cesium-widget {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

#cesiumContainer .cesium-widget canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure 3D panel body has proper sizing for Cesium */
#map3dPanel .map-panel-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================
   3D Map Placeholder (Lazy Activation Gate)
   ============================================ */
.cesium-placeholder {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
  transition: opacity 1.5s ease-out, visibility 1.5s ease-out;
}

.cesium-placeholder.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cesium-placeholder__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* Animated spinning globe using real Earth texture */
.cesium-placeholder__globe {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(90, 139, 255, 0.3);
  box-shadow:
    0 0 50px rgba(90, 139, 255, 0.25),
    0 0 100px rgba(90, 139, 255, 0.1);
}

/* Globe texture - scrolling Earth image */
.cesium-placeholder__globe::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background: url('/assets/img/globe.jpg') repeat-x center center;
  /* auto 100% preserves image aspect ratio, height fills container */
  background-size: auto 100%;
  animation: globe-scroll 40s linear infinite;
  pointer-events: none;
}

/* Sphere shading overlay - creates 3D illusion */
.cesium-placeholder__globe::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Dark edge shadow for sphere effect */
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.7) 100%),
    /* Sun highlight */
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
    /* Atmospheric blue glow */
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(100, 180, 255, 0.12) 80%, rgba(60, 140, 220, 0.08) 100%);
  pointer-events: none;
}

@keyframes globe-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* -50% of 400% element = -200% of container = one full globe image width */
    transform: translateX(-50%);
  }
}

.cesium-placeholder__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #5a8bff 0%, #4a7aee 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(90, 139, 255, 0.3);
}

.cesium-placeholder__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(90, 139, 255, 0.4);
  background: linear-gradient(135deg, #6a9bff 0%, #5a8aff 100%);
}

.cesium-placeholder__btn:active {
  transform: translateY(0);
}

.cesium-placeholder__btn i {
  font-size: 18px;
}

/* Activation controls wrapper */
.cesium-placeholder__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

.cesium-placeholder__controls.fade-out {
  opacity: 0;
  pointer-events: none;
}

.cesium-placeholder__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  user-select: none;
}

.cesium-placeholder__remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #5a8bff;
  cursor: pointer;
}

.cesium-placeholder__remember:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Loading bar (shown while Cesium loads) */
.cesium-placeholder__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.4s ease-in;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.cesium-placeholder__loader.active {
  opacity: 1;
}

.cesium-placeholder__loader-track {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.cesium-placeholder__loader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #5a8bff, #7aa3ff);
  border-radius: 4px;
  transition: width 0.3s ease-out;
}

.cesium-placeholder__loader-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  min-width: 180px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .cesium-placeholder__globe::before {
    animation: none;
  }
  .cesium-placeholder__loader-bar {
    transition: none;
  }
}

/* ============================================
   Cinematic Cloud Overlay (POI Transitions)
   ============================================ */
.cesium-cloud-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 800ms ease;
  background: url('/assets/img/cloud.png') center/cover no-repeat;
}

.cesium-cloud-overlay.active {
  opacity: 0.85;
}

/* Black fade overlay for initial 3D map reveal (space → location) */
.cesium-fade-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 55; /* Above cloud overlay */
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
}

.cesium-fade-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cesium-fade-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* ============================================
   Location Transition Pill (Destination Label)
   ============================================ */
.location-transition-pill {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 60;
  pointer-events: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.location-transition-pill.active {
  opacity: 1;
}

.location-transition-pill strong {
  font-weight: 600;
}

/* XR Pair Modal Styles */
@keyframes aiButtonPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.75); opacity: 0; }
}

@keyframes aiPulseDot {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.75); opacity: 0; }
}

@keyframes fadeout {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ========================================
   Attachment Preview Feature
   ======================================== */

/* Attachment Preview Area */
.attachment-preview-area {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
}

.attachment-preview-area.hidden {
  display: none;
}

.attachment-cards-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Attachment Card */
.attachment-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--interactive-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.attachment-card:hover {
  background: var(--interactive-bg-hover);
  border-color: var(--interactive-border-hover);
}

.attachment-card:focus-within {
  outline: 2px solid var(--focus-ring-strong);
  outline-offset: 2px;
}

/* Thumbnail */
.attachment-thumbnail {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.attachment-thumbnail img,
.attachment-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-thumbnail .file-icon {
  font-size: 24px;
  color: var(--color-muted);
}

/* Progress overlay */
.attachment-thumbnail .progress-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-thumbnail .progress-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border-subtle);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: attachmentSpin 0.8s linear infinite;
}

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

/* Card Info */
.attachment-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.attachment-filename {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.attachment-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--interactive-bg-active);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent);
}

.attachment-size {
  font-size: 11px;
  color: var(--text-muted);
}

/* Progress Bar */
.attachment-progress {
  width: 100%;
  height: 3px;
  background: var(--color-border-subtle);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.attachment-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--btn-primary-bg-start), var(--btn-primary-bg-end));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Error State */
.attachment-card.error {
  border-color: var(--color-error);
  background: var(--notification-error-bg);
}

.attachment-error-message {
  font-size: 11px;
  color: var(--color-error);
  margin-top: 2px;
}

.attachment-error-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.attachment-error-actions button {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.attachment-error-actions .btn-retry {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.attachment-error-actions .btn-retry:hover {
  background: var(--interactive-bg);
}

.attachment-error-actions .btn-remove-error {
  color: var(--color-error);
  border-color: var(--color-error);
}

.attachment-error-actions .btn-remove-error:hover {
  background: var(--notification-error-bg);
}

/* Card Actions */
.attachment-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.attachment-card:hover .attachment-actions,
.attachment-card:focus-within .attachment-actions {
  opacity: 1;
}

.attachment-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--interactive-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.attachment-action-btn:hover {
  background: var(--interactive-bg-hover);
  color: var(--text-primary);
  border-color: var(--interactive-border-hover);
}

.attachment-action-btn:focus {
  outline: 2px solid var(--focus-ring-strong);
  outline-offset: 2px;
}

.attachment-action-btn.btn-remove {
  color: rgba(255, 90, 90, 0.8);
}

.attachment-action-btn.btn-remove:hover {
  background: rgba(255, 90, 90, 0.1);
  color: #ff5a5a;
  border-color: rgba(255, 90, 90, 0.4);
}

/* Overflow Toggle */
.attachment-overflow-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  background: var(--interactive-bg);
  border: 1px dashed var(--color-border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.attachment-overflow-toggle:hover {
  background: var(--interactive-bg-hover);
  border-color: var(--interactive-border-hover);
  color: var(--text-secondary);
}

.attachment-overflow-toggle i {
  transition: transform 0.2s ease;
}

.attachment-overflow-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.attachment-card.overflow-hidden {
  display: none;
}

/* Lightbox */
.attachment-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-lightbox.hidden {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 20, 0.95);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px 20px;
  min-width: 300px;
  min-height: 300px;
}

.lightbox-body img,
.lightbox-body video,
.lightbox-body audio {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox-body video {
  background: #000;
}

.lightbox-footer {
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.lightbox-filename {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lightbox-filesize {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
  .attachment-card {
    padding: 8px;
  }

  .attachment-thumbnail {
    width: 40px;
    height: 40px;
  }

  .attachment-actions {
    opacity: 1;
  }

  .lightbox-body {
    padding: 50px 20px 10px;
  }

  .lightbox-footer {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Accessibility */
/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   Publish to PWA Modal
   ======================================== */

.publish-section {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04));
  color: var(--color-text);
}

.publish-section:last-child {
  border-bottom: none;
}

.publish-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.radio-label,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.radio-label:hover,
.checkbox-label:hover {
  background: rgba(90, 139, 255, 0.08);
  border-color: rgba(90, 139, 255, 0.2);
}

.radio-label input[type="radio"],
.radio-label input[type="checkbox"],
.checkbox-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.radio-label span,
.checkbox-label span {
  font-size: 13px;
  color: var(--color-text);
  flex: 1;
}

.radio-label input[type="radio"]:checked + span,
.checkbox-label input[type="checkbox"]:checked + span {
  color: var(--color-text-strong);
  font-weight: 600;
}

#publish-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#publish-modal .modal-content {
  --modal-width: min(480px, 98vw);
  --modal-max-width: 480px;
}

/* Publish Modal Tabs */
.publish-tabs {
  display: flex;
  gap: 3px;
  background: var(--color-bg-elevated, #1e1e24);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.publish-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted, #9ca3af);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.publish-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text, #e5e7eb);
}

.publish-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

.publish-tab-icon {
  font-size: 14px;
}

/* Tab Content */
.publish-tab-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.publish-tab-content.hidden {
  display: none;
}

.publish-description {
  font-size: 12px;
  color: var(--color-text-muted, #9ca3af);
  line-height: 1.4;
  margin: 0;
  padding: 8px 10px;
  background: var(--color-bg-elevated, #26262d);
  border-radius: 6px;
}

#publish-modal .publish-section {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#publish-modal .form-control {
  padding: 6px 10px !important;
  font-size: 13px !important;
}

#publish-modal select.form-control {
  padding: 6px 8px !important;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-strong, #e5e7eb);
}

.form-hint {
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
  margin: 0;
  line-height: 1.3;
}

/* Slug Preview Input */
.publish-slug-preview {
  display: flex;
  align-items: center;
  background: var(--color-bg-elevated, #26262d);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  overflow: hidden;
}

.slug-prefix {
  padding: 8px 2px 8px 10px;
  font-size: 12px;
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
  background: var(--color-bg-elevated, #26262d);
}

.form-control--inline {
  border: none;
  border-radius: 0;
  background: transparent;
  padding-left: 0;
}

.form-control--inline:focus {
  box-shadow: none;
  outline: none;
}

.publish-slug-preview:focus-within {
  border-color: var(--color-primary, #667eea);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Radio Group */
.radio-group {
  display: flex;
  gap: 12px;
}

/* Light theme overrides */
[data-theme="light"] .publish-tabs {
  background: rgba(245, 246, 251, 0.9);
  border-color: rgba(48, 62, 110, 0.16);
}

[data-theme="light"] .publish-tab:hover:not(.active) {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .publish-description {
  background: rgba(245, 246, 251, 0.9);
}

[data-theme="light"] .publish-slug-preview {
  background: rgba(245, 246, 251, 0.9);
  border-color: rgba(48, 62, 110, 0.16);
}

.radio-label input[type="radio"]:disabled + span,
.checkbox-label input[type="checkbox"]:disabled + span {
  color: var(--color-muted);
  cursor: not-allowed;
}

.publish-status {
  padding: 12px;
  background: linear-gradient(180deg, rgba(90, 139, 255, 0.12), rgba(90, 139, 255, 0.06));
  border: 1px solid rgba(90, 139, 255, 0.24);
  border-radius: 8px;
  margin-top: 8px;
  color: var(--color-text);
}

.publish-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.publish-progress .progress-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: attachmentSpin 0.8s linear infinite;
}

.publish-progress span {
  font-size: 12px;
  color: var(--color-text);
  font-weight: 600;
}

#password-section.hidden {
  display: none;
}
.radio-label input[type="radio"]:disabled,
.checkbox-label input[type="checkbox"]:disabled {
  opacity: 0.6;
}

[data-theme="light"] .radio-label:hover,
[data-theme="light"] .checkbox-label:hover {
  background: rgba(90, 139, 255, 0.12);
  border-color: rgba(90, 139, 255, 0.28);
}

[data-theme="light"] .publish-status {
  background: linear-gradient(180deg, rgba(90, 139, 255, 0.14), rgba(90, 139, 255, 0.08));
  border-color: rgba(90, 139, 255, 0.28);
}

.hosted-info-card,
#hosted-info-section > div {
  background: linear-gradient(165deg, rgba(90, 139, 255, 0.14), rgba(18, 19, 32, 0.9)) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(90, 139, 255, 0.26) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

.hosted-info-card h4,
#hosted-info-section h4 {
  margin: 0 0 8px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-text-strong) !important;
}

.hosted-info-card p,
#hosted-info-section p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--color-muted) !important;
  line-height: 1.55 !important;
}

.hosted-info-card strong,
#hosted-info-section strong {
  color: var(--color-text-strong) !important;
}

[data-theme="light"] .hosted-info-card,
[data-theme="light"] #hosted-info-section > div {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(239, 242, 255, 0.92)) !important;
  border-color: rgba(90, 139, 255, 0.28) !important;
  box-shadow: 0 12px 28px rgba(15, 24, 64, 0.1);
}

/* ===============================================
   PUBLISH SUCCESS MODAL STYLES
   =============================================== */

.publish-success-modal {
  max-width: 480px;
  text-align: center;
  padding: 32px 40px;
}

.publish-success-content {
  animation: publishSuccessFadeIn 0.4s ease-out;
}

.publish-success-content.hidden {
  display: none;
}

@keyframes publishSuccessFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Success Icon */
.publish-success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  animation: publishIconPulse 2s ease-in-out infinite;
}

.publish-success-icon--cloud {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
  color: #10b981;
  border: 2px solid rgba(16, 185, 129, 0.3);
}

.publish-success-icon--download {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.1));
  color: #667eea;
  border: 2px solid rgba(102, 126, 234, 0.3);
}

@keyframes publishIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px 4px rgba(16, 185, 129, 0.15);
  }
}

.publish-success-icon--download {
  animation-name: publishDownloadPulse;
}

@keyframes publishDownloadPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.3);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px 4px rgba(102, 126, 234, 0.15);
  }
}

/* Error Icon */
.publish-success-icon--error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
  color: #ef4444;
  border: 2px solid rgba(239, 68, 68, 0.3);
  animation-name: publishErrorPulse;
}

@keyframes publishErrorPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px 4px rgba(239, 68, 68, 0.15);
  }
}

/* Title and Subtitle */
.publish-success-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 8px;
}

.publish-success-subtitle {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 24px;
}

/* URL Box */
.publish-success-url-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.publish-success-url-label {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 8px;
  text-align: left;
}

.publish-success-url-row {
  display: flex;
  gap: 8px;
}

.publish-success-url-input {
  flex: 1;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
  font-family: var(--font-mono);
  cursor: text;
}

.publish-success-url-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.publish-success-copy-btn {
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.publish-success-copy-btn:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.publish-success-copy-btn.copied {
  background: #10b981;
}

.publish-success-copy-btn.copied i::before {
  content: "\f26e"; /* bi-check */
}

/* Info Items */
.publish-success-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.publish-success-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text);
}

.publish-success-info-item i {
  font-size: 16px;
  color: #10b981;
}

/* Actions */
.publish-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}

.publish-success-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.publish-success-actions .btn-primary,
.publish-success-actions .btn-secondary {
  min-width: 140px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
}

.publish-success-actions .btn-primary i,
.publish-success-actions .btn-secondary i {
  font-size: 16px;
}

/* Tip */
.publish-success-tip {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.publish-success-tip i {
  color: #f59e0b;
  font-size: 14px;
}

.publish-success-tip a {
  color: var(--color-accent);
  text-decoration: underline;
}

.publish-success-tip a:hover {
  color: var(--color-accent-hover);
}

/* Error State Styles */
.publish-error-title {
  color: #ef4444 !important;
}

.publish-error-details {
  text-align: left;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}

.publish-error-details-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border-bottom: 1px solid rgba(239, 68, 68, 0.15);
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
}

.publish-error-details-text {
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
  background: transparent;
}

[data-theme="light"] .publish-error-details {
  background: rgba(239, 68, 68, 0.05);
}

/* Export Success Specific Styles */
.publish-success-steps {
  text-align: left;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(102, 126, 234, 0.15);
}

.publish-success-steps-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0 0 12px;
}

.publish-success-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: steps;
}

.publish-success-steps-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  counter-increment: steps;
  position: relative;
  padding-left: 32px;
}

.publish-success-steps-list li:last-child {
  border-bottom: none;
}

.publish-success-steps-list li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background: rgba(102, 126, 234, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #667eea;
}

.publish-success-steps-list li i {
  color: #667eea;
  font-size: 16px;
}

.publish-success-steps-list li span {
  font-size: 13px;
  color: var(--color-text);
}

/* Hosting Options */
.publish-success-hosting-options {
  margin-bottom: 24px;
}

.publish-success-hosting-label {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 10px;
}

.publish-success-hosting-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.hosting-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-text);
  font-weight: 500;
}

/* Light Theme Overrides */
[data-theme="light"] .publish-success-modal {
  background: white;
}

[data-theme="light"] .publish-success-url-box {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .publish-success-info {
  background: rgba(16, 185, 129, 0.06);
}

[data-theme="light"] .publish-success-steps {
  background: rgba(102, 126, 234, 0.06);
}

[data-theme="light"] .publish-success-tip {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .hosting-badge {
  background: rgba(0, 0, 0, 0.04);
}

/* ===============================================
   DELETE PROJECT CONFIRMATION MODAL
   =============================================== */

.delete-project-modal {
  max-width: 500px;
  padding: 0;
  overflow: hidden;
}

.delete-project-header {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
  padding: 2rem;
  text-align: center;
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.delete-project-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #ef4444;
  border: 2px solid rgba(239, 68, 68, 0.3);
  animation: deleteIconPulse 2s ease-in-out infinite;
}

@keyframes deleteIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

.delete-project-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text);
}

.delete-project-body {
  padding: 1.5rem 2rem;
}

.delete-project-warning {
  color: var(--color-muted);
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

.delete-project-info {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.delete-project-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.delete-project-url {
  font-size: 0.8125rem;
  color: var(--color-muted);
  word-break: break-all;
  font-family: var(--font-mono);
}

.delete-project-consequences {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.delete-project-consequences h4 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.delete-project-consequences ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.delete-project-consequences li {
  font-size: 0.8125rem;
  color: var(--color-text);
  padding: 0.375rem 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.delete-project-consequences li i {
  color: #ef4444;
  font-size: 0.75rem;
  opacity: 0.7;
}

.delete-project-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

.delete-project-note i {
  color: var(--color-accent);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.delete-project-confirm {
  margin-bottom: 0.5rem;
}

.delete-project-confirm label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.delete-confirm-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.delete-confirm-input:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.delete-confirm-input.valid {
  border-color: #10b981;
}

.delete-confirm-input.invalid {
  border-color: #ef4444;
}

.delete-confirm-hint {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin: 0.375rem 0 0;
  min-height: 1rem;
}

.delete-confirm-hint.error {
  color: #ef4444;
}

.delete-project-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem 2rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-panel);
}

.delete-project-actions .btn-secondary {
  flex: 1;
}

.delete-project-actions .btn-danger {
  flex: 1.5;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.delete-project-actions .btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.delete-project-actions .btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.delete-project-actions .btn-danger:active:not(:disabled) {
  transform: translateY(0);
}

/* Delete Modal Light Theme */
[data-theme="light"] .delete-project-modal {
  background: white;
}

[data-theme="light"] .delete-project-header {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.03));
}

[data-theme="light"] .delete-project-info {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .delete-project-consequences {
  background: rgba(239, 68, 68, 0.04);
}

[data-theme="light"] .delete-project-note {
  background: rgba(102, 126, 234, 0.06);
}

/* ===============================================
   DEVICE ROLE MANAGEMENT STYLES
   =============================================== */

/* Role Switcher Card */
.role-switcher-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
  transition: all var(--transition);
}

.role-switcher-card.role-changing {
  transform: scale(0.98);
  box-shadow: var(--shadow-elevated);
}

/* Role Switcher Header */
.role-switcher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.role-switcher-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0;
}

.device-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.device-type {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

.device-size {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Role Buttons */
.role-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.role-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--interactive-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.role-btn:hover {
  background: var(--interactive-bg-hover);
  border-color: var(--interactive-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.role-btn:active {
  transform: translateY(0);
}

.role-btn.active {
  background: var(--interactive-bg-active);
  border-color: var(--interactive-border-active);
  box-shadow: var(--shadow-selected);
  color: var(--color-text-strong);
}

.role-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
}

.role-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.role-btn:disabled:hover {
  background: var(--interactive-bg);
  border-color: var(--color-border);
  box-shadow: none;
}

/* Role Button Icons */
.role-btn i {
  font-size: 1.5rem;
  color: var(--color-accent);
  opacity: 0.8;
  transition: all var(--transition);
}

.role-btn.active i {
  opacity: 1;
  transform: scale(1.1);
}

.icon-controller::before {
  content: '';
}

.icon-display::before {
  content: '';
}

/* Role Button Content */
.role-btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.role-btn-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
}

.role-btn-desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.role-btn.active .role-btn-desc {
  color: var(--color-text);
}

/* Role Status */
.role-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-subtle);
}

/* Connection Indicator */
.connection-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.connection-indicator i {
  font-size: 1rem;
  transition: all var(--transition);
}

.connection-indicator.connected {
  color: var(--status-published-text);
}

.connection-indicator.connected i {
  color: var(--status-published-bg);
  animation: sync-pulse 2s ease-in-out infinite;
}

.connection-indicator.disconnected {
  color: var(--color-text-secondary);
}

.connection-indicator.disconnected i {
  color: var(--color-muted);
}

.icon-sync::before {
  content: '';
}

/* Capability Hints */
.capability-hints {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hint {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Role Notifications */
.role-notification {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}

.role-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.role-notification--success {
  background: var(--status-published-bg);
  color: var(--status-published-text);
  border: 1px solid var(--status-published-border);
}

.role-notification--error {
  background: var(--color-danger);
  color: var(--text-inverse);
  border: 1px solid var(--color-danger);
}

.role-notification--info {
  background: var(--status-default-bg);
  color: var(--status-default-text);
  border: 1px solid var(--status-default-border);
}

/* Body Role Classes for Global UI Changes */
body.role-controller .display-only {
  display: none !important;
}

body.role-display .controller-only {
  display: none !important;
}

body.role-display .map-toolbar .edit-controls,
body.role-display .sidebar .poi-create-btn,
body.role-display .navbar-center .edit-tools {
  opacity: 0.5;
  pointer-events: none;
}

body.role-display .map-canvas {
  cursor: default !important;
}

/* Role-specific animations */
@keyframes sync-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Responsive Role Switcher */
@media (max-width: 768px) {
  .role-buttons {
    flex-direction: column;
  }
  
  .role-btn {
    padding: 12px;
  }
  
  .device-info {
    align-items: flex-start;
  }
  
  .role-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .capability-hints {
    align-items: flex-start;
  }
}

/* Role Switcher in Sidebar */
.sidebar .role-switcher-card {
  margin-bottom: 16px;
  padding: 16px;
}

.sidebar .role-btn {
  padding: 12px;
}

.sidebar .role-btn i {
  font-size: 1.2rem;
}

/* Role Switcher in Modal */
.sync-modal .role-switcher-card {
  margin-top: 20px;
}

/* -----------------------------------------
   Global background grid (tool pages)
   ----------------------------------------- */
/* Background grid variables moved to main :root block for consolidation */
/* See line ~2078 for combined :root declaration */

.bg-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, var(--bg-grid-accent1), transparent 45%),
              radial-gradient(circle at 80% 0%, var(--bg-grid-accent2), transparent 50%),
              var(--bg-grid-bg);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-backdrop::before {
  content: "";
  position: absolute;
  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;
  background: repeating-linear-gradient(110deg, var(--bg-grid-line) 0 2px, transparent 2px 16px);
  animation: bg-rotate-grid 720s linear infinite;
  opacity: 0.33;
}

.bg-backdrop::after {
  content: "";
  position: absolute;
  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;
  background: repeating-linear-gradient(110deg, var(--bg-grid-line-2) 0 2px, transparent 2px 16px);
  animation: bg-rotate-grid 720s linear infinite;
  animation-direction: reverse;
  opacity: 0.12;
  filter: blur(4px);
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.8;
  animation: bg-float 42s ease-in-out infinite;
}

.bg-orb.orb-a {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--bg-grid-orb-1) 0%, rgba(0, 0, 0, 0) 70%);
  top: 15%;
  left: 60%;
}

.bg-orb.orb-b {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, var(--bg-grid-orb-2) 0%, rgba(0, 0, 0, 0) 70%);
  bottom: 10%;
  right: 55%;
  animation-duration: 60s;
  animation-delay: -10s;
}

@keyframes bg-rotate-grid {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bg-float {
  0%, 100% { transform: translate3d(-30%, -25%, 0); }
  50% { transform: translate3d(10%, 15%, 0) scale(1.1); }
}

/* -----------------------------------------
   Authentication Modal Styles
   ----------------------------------------- */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.auth-field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}

.auth-field input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  border-radius: 8px;
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-input-border);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.12);
}

.auth-field input::placeholder {
  color: var(--color-placeholder);
}

.field-hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: -2px;
}

.field-optional {
  font-size: 0.85rem;
  color: var(--color-muted);
  font-weight: 400;
}

.required-indicator {
  color: var(--color-accent);
  margin-left: 2px;
}

.auth-error {
  padding: 10px 12px;
  background: rgba(230, 102, 102, 0.12);
  border: 1px solid rgba(230, 102, 102, 0.3);
  border-radius: 8px;
  color: #ff9999;
  font-size: 0.9rem;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-error::before {
  content: "";
  font-size: 1.1rem;
}

.auth-success {
  padding: 10px 12px;
  background: rgba(78, 242, 168, 0.12);
  border: 1px solid rgba(78, 242, 168, 0.3);
  border-radius: 8px;
  color: #4ef2a8;
  font-size: 0.9rem;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-success::before {
  content: "\2713";
  font-size: 1.1rem;
  font-weight: bold;
}

.auth-switch {
  text-align: center;
  padding: 12px 16px 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  margin-top: 12px;
}

.auth-switch-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.auth-switch-btn:hover {
  color: #7a9fff;
}

.auth-switch-btn:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Auth modal specific styles */
#register-modal .modal-body,
#login-modal .modal-body {
  padding: 20px;
}

#register-modal .modal-footer,
#login-modal .modal-footer {
  padding: 16px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#register-modal .modal-header,
#login-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Button loading state */
.btn-primary.loading,
.btn-secondary.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-primary.loading::after,
.btn-secondary.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: btn-spinner 0.6s linear infinite;
}

@keyframes btn-spinner {
  to { transform: rotate(360deg); }
}

/* Mixx AI Panel */
.mixx-ai-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  bottom: 25px;
  width: clamp(320px, 22vw, 360px);
  transform: translateX(calc(100% + 20px));
  background: var(--panel-semi-transparent);
  border-left: 1px solid var(--border-semi-transparent);
  box-shadow: -14px 0 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  z-index: 900; /* Below navbar (1000) so tooltips/dropdowns appear above */
  pointer-events: none;
  transition: transform 2400ms cubic-bezier(0.3, 0, 0.1, 1);
}

.mixx-ai-panel.hidden {
  transform: translateX(calc(100% + 20px));
  pointer-events: none;
}

.mixx-ai-panel.visible {
  transform: translateX(0);
  pointer-events: auto;
}

.mixx-ai-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mixx-ai-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: var(--color-text, #e7e7ea);
}

/* ============================================
   AI State Colors - Consistent UX across app
   - Dormant: White (idle, waiting)
   - Listening: Light Green (hearing user)
   - Thinking: Dark Blue (processing)
   - Speaking: Light Blue (talking to user)
   ============================================ */
:root {
  --ai-color-dormant: rgba(255, 255, 255, 0.8);
  --ai-color-dormant-glow: rgba(255, 255, 255, 0.5);
  --ai-color-listening: rgba(134, 239, 172, 1);
  --ai-color-listening-glow: rgba(134, 239, 172, 0.6);
  --ai-color-thinking: rgba(59, 130, 246, 1);
  --ai-color-thinking-glow: rgba(59, 130, 246, 0.6);
  --ai-color-speaking: rgba(147, 197, 253, 1);
  --ai-color-speaking-glow: rgba(147, 197, 253, 0.6);
  --ai-color-error: rgba(239, 68, 68, 1);
  --ai-color-error-glow: rgba(239, 68, 68, 0.6);
}

.mixx-ai-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px var(--ai-color-dormant-glow));
  transition: filter 0.3s ease;
}

/* Dormant state - white subtle pulse (default/idle) */
.mixx-ai-logo.ai-dormant,
.mixx-ai-logo:not(.ai-listening):not(.ai-thinking):not(.ai-speaking) {
  animation: aiPulseDormant 3s ease-in-out infinite;
}

@keyframes aiPulseDormant {
  0%, 100% {
    filter: drop-shadow(0 0 4px var(--ai-color-dormant-glow));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px var(--ai-color-dormant));
    transform: scale(1.02);
  }
}

/* Listening state - light green pulse */
.mixx-ai-logo.ai-listening {
  animation: aiPulseListening 1.2s ease-in-out infinite;
}

@keyframes aiPulseListening {
  0%, 100% {
    filter: drop-shadow(0 0 6px var(--ai-color-listening-glow));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 14px var(--ai-color-listening));
    transform: scale(1.06);
  }
}

/* Thinking state - dark blue pulse */
.mixx-ai-logo.ai-thinking {
  animation: aiPulseThinking 1.5s ease-in-out infinite;
}

@keyframes aiPulseThinking {
  0%, 100% {
    filter: drop-shadow(0 0 6px var(--ai-color-thinking-glow));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px var(--ai-color-thinking));
    transform: scale(1.04);
  }
}

/* Speaking state - light blue pulse (also .pulsing for backwards compat) */
.mixx-ai-logo.ai-speaking,
.mixx-ai-logo.pulsing {
  animation: aiPulseSpeaking 1s ease-in-out infinite;
}

@keyframes aiPulseSpeaking {
  0%, 100% {
    filter: drop-shadow(0 0 6px var(--ai-color-speaking-glow));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 14px var(--ai-color-speaking));
    transform: scale(1.06);
  }
}

/* Error/Disconnected state - red pulse */
.mixx-ai-logo.ai-error {
  animation: aiPulseError 1s ease-in-out infinite;
}

@keyframes aiPulseError {
  0%, 100% {
    filter: drop-shadow(0 0 6px var(--ai-color-error-glow));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 14px var(--ai-color-error));
    transform: scale(1.04);
  }
}

/* Mode selector error state - Red glow + scale up + pulse */
.mode-selector.ai-error {
  box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.25), 0 0 30px rgba(239, 68, 68, 0.4), 0 0 60px rgba(239, 68, 68, 0.2);
  background: color-mix(in srgb, var(--interactive-bg-active) 80%, transparent 20%);
  transform: scale(2);
  z-index: 10100; /* Above all page elements including modals */
  animation: modeSelectorPulseRed 0.8s ease-in-out infinite;
}

@keyframes modeSelectorPulseRed {
  0%, 100% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.25), 0 0 30px rgba(239, 68, 68, 0.4), 0 0 60px rgba(239, 68, 68, 0.2);
    transform: scale(2);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(239, 68, 68, 0.4), 0 0 45px rgba(239, 68, 68, 0.55), 0 0 90px rgba(239, 68, 68, 0.35);
    transform: scale(2.08);
  }
}

.mixx-ai-panel__tts,
.mixx-ai-panel__clear,
.mixx-ai-panel__close {
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  background: transparent;
  color: var(--color-text, #e7e7ea);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.mixx-ai-panel__tts {
  margin-right: 8px;
  font-size: 1rem;
}

.mixx-ai-panel__tts:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mixx-ai-panel__tts.tts-off {
  opacity: 0.5;
}

.mixx-ai-panel__tts.tts-off:hover {
  opacity: 0.8;
}

.mixx-ai-panel__clear {
  margin-right: 8px;
  opacity: 0.7;
}

.mixx-ai-panel__clear:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
}

.mixx-ai-panel__log {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border-semi-transparent);
  border-radius: 12px;
  background: var(--panel-semi-transparent);
  color: var(--color-text, #e7e7ea);
}

.mixx-ai-panel__input {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mixx-ai-panel__input input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-semi-transparent);
  background: var(--bg-semi-transparent);
  color: var(--color-text, #e7e7ea);
}

.mixx-ai-panel__input button {
  padding: 10px 10.8px;
  border-radius: 12px;
  border: none;
  background: var(--color-accent, #5a8bff);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mixx-ai-panel__input button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(90, 139, 255, 0.3);
}

.mixx-ai-mic-btn {
  background: var(--panel-80-transparent) !important;
  border: 1px solid var(--border-semi-transparent) !important;
  color: var(--color-text, #e7e7ea) !important;
  padding: 10px 14px !important;
}

.mixx-ai-mic-btn:hover {
  background: var(--accent-panel-mix) !important;
  border-color: var(--color-accent, #5a8bff) !important;
  box-shadow: 0 4px 12px rgba(90, 139, 255, 0.2) !important;
}

.mixx-ai-mic-btn.is-listening {
  background: rgba(255, 82, 82, 0.15) !important;
  border-color: rgba(255, 82, 82, 0.4) !important;
  color: #ff5252 !important;
  animation: micPulse 1.5s ease-in-out infinite;
}

@keyframes micPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 82, 82, 0);
  }
}

.mixx-ai-mic-btn i {
  font-size: 0.95rem;
}

.mixx-ai-message {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mixx-ai-message__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.7;
}

.mixx-ai-message__bubble {
    padding: 10px 14px;
    border-radius: 16px;
    max-width: 85%;
    word-wrap: break-word;
    line-height: 1.5;
    white-space: pre-line;
    font-size: 0.9rem;
  }

.mixx-ai-message--user {
  align-items: flex-end;
}

.mixx-ai-message--user .mixx-ai-message__bubble {
  background: linear-gradient(135deg, var(--color-accent, #5a8bff), var(--color-accent-strong, #89b3ff));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mixx-ai-message--assistant {
  align-items: flex-start;
}

.mixx-ai-message--assistant .mixx-ai-message__bubble {
  background: color-mix(in srgb, var(--color-panel, #111116) 80%, transparent 20%);
  border: 1px solid color-mix(in srgb, var(--color-border, rgba(255, 255, 255, 0.08)) 50%, transparent 50%);
  color: var(--color-text, #e7e7ea);
  border-bottom-left-radius: 4px;
}

.mixx-ai-message--typing {
  align-items: flex-start;
}

.mixx-ai-message--typing .mixx-ai-message__bubble {
  background: color-mix(in srgb, var(--color-panel, #111116) 70%, transparent 30%);
  border: 1px dashed color-mix(in srgb, var(--color-border, rgba(255, 255, 255, 0.08)) 50%, transparent 50%);
  color: var(--color-muted, rgba(231, 231, 234, 0.68));
  padding: 8px 12px;
  font-style: italic;
}

:root[data-theme="light"] .mixx-ai-panel,
body.light-mode .mixx-ai-panel,
.theme-light .mixx-ai-panel {
  background: color-mix(in srgb, var(--color-panel, #ffffff) 50%, transparent 50%);
  border-left: 1px solid color-mix(in srgb, var(--color-border, rgba(0, 0, 0, 0.08)) 50%, transparent 50%);
  border-radius: 16px 0 0 16px;
}

:root[data-theme="light"] .mixx-ai-panel__log,
body.light-mode .mixx-ai-panel__log,
.theme-light .mixx-ai-panel__log {
  border: 1px solid color-mix(in srgb, var(--color-border, rgba(0, 0, 0, 0.08)) 50%, transparent 50%);
  background: color-mix(in srgb, var(--color-panel, #ffffff) 50%, transparent 50%);
  color: var(--color-text, #1f2030);
}

:root[data-theme="light"] .mixx-ai-panel__input input,
body.light-mode .mixx-ai-panel__input input,
.theme-light .mixx-ai-panel__input input {
  border: 1px solid color-mix(in srgb, var(--color-border, rgba(0, 0, 0, 0.08)) 50%, transparent 50%);
  background: color-mix(in srgb, var(--color-bg, #f5f6fb) 50%, transparent 50%);
  color: var(--color-text, #1f2030);
}

:root[data-theme="light"] .mixx-ai-mic-btn,
body.light-mode .mixx-ai-mic-btn,
.theme-light .mixx-ai-mic-btn {
  background: color-mix(in srgb, var(--color-panel, #ffffff) 80%, transparent 20%) !important;
  border: 1px solid color-mix(in srgb, var(--color-border, rgba(0, 0, 0, 0.12)) 50%, transparent 50%) !important;
  color: var(--color-text, #1f2030) !important;
}

:root[data-theme="light"] .mixx-ai-mic-btn:hover,
body.light-mode .mixx-ai-mic-btn:hover,
.theme-light .mixx-ai-mic-btn:hover {
  background: color-mix(in srgb, var(--color-accent, #5a8bff) 15%, var(--color-panel, #ffffff) 85%) !important;
}

.profile-menu {
  z-index: 10001 !important;
}

/* ============================================
   [SYNC] POI Highlight Styles (companion sync)
   ============================================ */

/* POI item highlight animation in sidebar */
.poi-item.highlighted,
.poi-list-item.highlighted,
[data-poi].highlighted {
  animation: poi-highlight-pulse 0.5s ease-out 3;
  background: rgba(59, 130, 246, 0.2) !important;
  box-shadow: 0 0 0 2px var(--color-accent, #3b82f6);
}

/* Text chip highlight animation */
.text-chip--poi.highlighted {
  animation: poi-highlight-pulse 0.5s ease-out 3;
  background: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 0 0 2px var(--color-accent, #3b82f6), 0 0 12px rgba(59, 130, 246, 0.4);
}

/* Leaflet marker pulse animation */
.poi-highlight-pulse {
  animation: marker-pulse 0.6s ease-out 3;
}

@keyframes poi-highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

@keyframes marker-pulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.3);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* ============================================
   Dashboard Slide-Over Panel
   ============================================ */

/* Overlay backdrop */
.dashboard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dashboard-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Slide-over panel */
.dashboard-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(800px, 90vw);
  height: 100vh;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
}

.dashboard-panel.open {
  transform: translateX(0);
}

/* Panel header */
.dashboard-panel-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-bg);
  flex-shrink: 0;
}

.dashboard-panel-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text);
}

.dashboard-panel-header h2 i {
  color: var(--color-accent);
}

/* Header actions (expand/close buttons) */
.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-control-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 1.125rem;
}

.dashboard-control-btn:hover {
  background: var(--color-bg);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Panel content - iframe container */
.dashboard-panel-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--color-bg);
}

/* Iframe fills the content area */
.dashboard-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--color-bg);
}

/* Loading state */
.dashboard-loading-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-muted);
  gap: 1rem;
  z-index: 1;
}

.dashboard-loading-state p {
  margin: 0;
  font-size: 0.875rem;
}

/* Loading spinner */
.dashboard-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: dashboard-spin 0.8s linear infinite;
}

@keyframes dashboard-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hide loading state once iframe is loaded */
.dashboard-iframe:not([src=""]) ~ .dashboard-loading-state,
.dashboard-iframe[data-loaded="true"] ~ .dashboard-loading-state {
  display: none;
}

/* ===== EXPANDED MODE ===== */
/* Full-screen expanded mode */
.dashboard-panel.expanded {
  width: 100vw;
  border-left: none;
}

.dashboard-overlay.expanded {
  display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .dashboard-panel {
    width: 100vw;
  }
}

/* ============================================
   Onboarding Tour Overlay
   ============================================ */

/* Main overlay - transparent by default, darkness comes from highlight's box-shadow */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tour-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* When no target element (center screen messages), show dark backdrop */
.tour-overlay.no-target {
  background: rgba(0, 0, 0, 0.75);
}

/* Prevent body scroll when tour is active */
body.tour-active {
  overflow: hidden;
}

/* Highlight ring around targeted element - creates cutout effect */
.tour-highlight {
  position: absolute;
  border-radius: 12px;
  background: transparent;
  box-shadow:
    0 0 0 4px var(--color-accent, #3b82f6),
    0 0 0 9999px rgba(0, 0, 0, 0.75);
  z-index: 10001;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tour tooltip card */
.tour-tooltip {
  position: absolute;
  background: var(--color-panel, #1a1a2e);
  border: 1px solid var(--color-border, #2d2d44);
  border-radius: 16px;
  padding: 1.5rem;
  width: 340px;
  max-width: calc(100vw - 2rem);
  z-index: 10002;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Tooltip entrance animation */
@keyframes tourTooltipSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tour-tooltip-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tour-tooltip-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-accent, #3b82f6), var(--color-accent-hover, #2563eb));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tour-tooltip-icon i {
  font-size: 1.5rem;
  color: white;
}

.tour-tooltip-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text, #e5e7eb);
  line-height: 1.3;
}

.tour-tooltip-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted, #9ca3af);
  margin-bottom: 1.25rem;
}

.tour-tooltip-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tour-step-counter {
  font-size: 0.75rem;
  color: var(--color-muted, #9ca3af);
  text-align: center;
}

/* Progress dots */
.tour-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.tour-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border, #2d2d44);
  transition: all 0.3s ease;
}

.tour-progress-dot.completed {
  background: var(--color-accent, #3b82f6);
  opacity: 0.4;
}

.tour-progress-dot.active {
  background: var(--color-accent, #3b82f6);
  transform: scale(1.25);
  box-shadow: 0 0 8px var(--color-accent, #3b82f6);
}

/* Tour action buttons */
.tour-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.tour-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tour-btn-skip {
  background: transparent;
  color: var(--color-muted, #9ca3af);
  border: 1px solid var(--color-border, #2d2d44);
}

.tour-btn-skip:hover {
  background: var(--color-bg, #0a0a14);
  color: var(--color-text, #e5e7eb);
  border-color: var(--color-text, #e5e7eb);
}

.tour-btn-next {
  background: var(--color-accent, #3b82f6);
  color: white;
}

.tour-btn-next:hover {
  background: var(--color-accent-hover, #2563eb);
  transform: translateX(2px);
}

.tour-btn-next i {
  transition: transform 0.2s ease;
}

.tour-btn-next:hover i {
  transform: translateX(3px);
}

/* "Don't show again" link */
.tour-skip-all {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-muted, #9ca3af);
  cursor: pointer;
  padding: 0.5rem;
  margin-top: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.tour-skip-all:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Responsive adjustments for tour */
@media (max-width: 480px) {
  .tour-tooltip {
    width: calc(100vw - 2rem);
    padding: 1.25rem;
  }

  .tour-tooltip-icon {
    width: 40px;
    height: 40px;
  }

  .tour-tooltip-icon i {
    font-size: 1.25rem;
  }

  .tour-tooltip-title {
    font-size: 1.125rem;
  }

  .tour-tooltip-desc {
    font-size: 0.875rem;
  }
}

/* Animation-aware tour transitions */
[data-animations="off"] .tour-overlay {
  transition: none;
}

[data-animations="off"] .tour-highlight {
  transition: none;
}

[data-animations="off"] .tour-tooltip {
  animation: none;
}

[data-animations="off"] .tour-progress-dot {
  transition: none;
}

[data-animations="off"] .tour-btn {
  transition: none;
}

[data-animations="off"] .tour-btn-next:hover {
  transform: none;
}

[data-animations="off"] .tour-btn-next:hover i {
  transform: none;
}

/* ============================================
   Concierge AI Overlay (Enhanced Mode)
   Sleek, high-tech design with focal AI orb
   Fully opaque - no tool interface visible
   ============================================ */

.concierge-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
  overflow: hidden;
}

.concierge-overlay.concierge-visible {
  opacity: 1;
  visibility: visible;
}

.concierge-overlay.concierge-exit {
  opacity: 0;
  visibility: hidden;
}

/* Animated background layer */
.concierge-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.concierge-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(90, 139, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 30% 20%, rgba(90, 139, 255, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse 50% 60% at 70% 80%, rgba(120, 80, 200, 0.04) 0%, transparent 40%),
    linear-gradient(180deg, #050508 0%, #0a0a12 50%, #050508 100%);
  animation: bgPulse 8s ease-in-out infinite;
}

@keyframes bgPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Floating particles */
.concierge-bg-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.concierge-bg-particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(90, 139, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(90, 139, 255, 0.4);
}

.concierge-bg-particles span:nth-child(1) { left: 10%; top: 20%; animation: particleFloat 12s ease-in-out infinite; }
.concierge-bg-particles span:nth-child(2) { left: 20%; top: 60%; animation: particleFloat 15s ease-in-out infinite 1s; }
.concierge-bg-particles span:nth-child(3) { left: 35%; top: 30%; animation: particleFloat 10s ease-in-out infinite 2s; }
.concierge-bg-particles span:nth-child(4) { left: 50%; top: 70%; animation: particleFloat 14s ease-in-out infinite 0.5s; }
.concierge-bg-particles span:nth-child(5) { left: 65%; top: 25%; animation: particleFloat 11s ease-in-out infinite 3s; }
.concierge-bg-particles span:nth-child(6) { left: 75%; top: 55%; animation: particleFloat 13s ease-in-out infinite 1.5s; }
.concierge-bg-particles span:nth-child(7) { left: 85%; top: 35%; animation: particleFloat 16s ease-in-out infinite 2.5s; }
.concierge-bg-particles span:nth-child(8) { left: 15%; top: 80%; animation: particleFloat 9s ease-in-out infinite 4s; }
.concierge-bg-particles span:nth-child(9) { left: 45%; top: 15%; animation: particleFloat 17s ease-in-out infinite 0.8s; }
.concierge-bg-particles span:nth-child(10) { left: 90%; top: 75%; animation: particleFloat 12s ease-in-out infinite 3.5s; }

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-30px) translateX(10px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-15px) translateX(-15px);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-40px) translateX(5px);
    opacity: 0.7;
  }
}

/* Container - 3 second scale-in animation from zero */
.concierge-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 520px;
  width: 90%;
  padding: 48px 32px;
  transform: scale(0);
  opacity: 0;
  animation: conciergeScaleIn 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes conciergeScaleIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Orb wrapper */
.concierge-orb-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

/* Orb - LARGE focal element, no colored circle */
.concierge-orb {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.4s ease, transform 0.4s ease;
}

.concierge-orb-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 40px var(--ai-color-dormant-glow))
    drop-shadow(0 0 80px rgba(255, 255, 255, 0.15));
  z-index: 1;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Level bars - refined, positioned below orb */
.concierge-level-bars {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  height: 32px;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Level bars use listening color (light green) */
.concierge-level-bars span {
  width: 3px;
  background: linear-gradient(to top, var(--ai-color-listening-glow), var(--ai-color-listening));
  border-radius: 1.5px;
  transition: height 0.08s ease;
}

/* Idle/Dormant state - WHITE subtle breathing glow */
.concierge-orb.concierge-idle .concierge-orb-img {
  animation: conciergeIdleGlow 4s ease-in-out infinite;
}

@keyframes conciergeIdleGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 30px var(--ai-color-dormant-glow))
      drop-shadow(0 0 60px rgba(255, 255, 255, 0.1));
    transform: scale(1);
  }
  50% {
    filter:
      drop-shadow(0 0 50px var(--ai-color-dormant))
      drop-shadow(0 0 100px rgba(255, 255, 255, 0.2));
    transform: scale(1.02);
  }
}

/* Listening state - active glow + level bars */
.concierge-orb.concierge-listening .concierge-orb-img {
  animation: conciergeListeningGlow 1.5s ease-in-out infinite;
}

.concierge-orb.concierge-listening .concierge-level-bars {
  opacity: 1;
}

.concierge-orb.concierge-listening .concierge-level-bars span:nth-child(1) { animation: levelBar1 0.5s ease-in-out infinite; }
.concierge-orb.concierge-listening .concierge-level-bars span:nth-child(2) { animation: levelBar2 0.4s ease-in-out infinite; }
.concierge-orb.concierge-listening .concierge-level-bars span:nth-child(3) { animation: levelBar3 0.45s ease-in-out infinite; }
.concierge-orb.concierge-listening .concierge-level-bars span:nth-child(4) { animation: levelBar4 0.35s ease-in-out infinite; }
.concierge-orb.concierge-listening .concierge-level-bars span:nth-child(5) { animation: levelBar5 0.55s ease-in-out infinite; }

@keyframes levelBar1 { 0%, 100% { height: 8px; } 50% { height: 24px; } }
@keyframes levelBar2 { 0%, 100% { height: 12px; } 50% { height: 28px; } }
@keyframes levelBar3 { 0%, 100% { height: 16px; } 50% { height: 32px; } }
@keyframes levelBar4 { 0%, 100% { height: 10px; } 50% { height: 20px; } }
@keyframes levelBar5 { 0%, 100% { height: 14px; } 50% { height: 26px; } }

/* Listening state - LIGHT GREEN active glow */
@keyframes conciergeListeningGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 40px var(--ai-color-listening-glow))
      drop-shadow(0 0 80px rgba(134, 239, 172, 0.25));
    transform: scale(1);
  }
  50% {
    filter:
      drop-shadow(0 0 60px var(--ai-color-listening))
      drop-shadow(0 0 120px rgba(134, 239, 172, 0.35));
    transform: scale(1.03);
  }
}

/* Thinking state - DARK BLUE shimmer */
.concierge-orb.concierge-thinking .concierge-orb-img {
  animation: conciergeThinkingGlow 2s ease-in-out infinite;
}

@keyframes conciergeThinkingGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 35px var(--ai-color-thinking-glow))
      drop-shadow(0 0 70px rgba(59, 130, 246, 0.15))
      brightness(1);
  }
  50% {
    filter:
      drop-shadow(0 0 45px var(--ai-color-thinking))
      drop-shadow(0 0 90px rgba(59, 130, 246, 0.25))
      brightness(1.1);
  }
}

/* Speaking state - LIGHT BLUE radiant glow */
.concierge-orb.concierge-speaking .concierge-orb-img {
  animation: conciergeSpeakingGlow 1s ease-in-out infinite;
}

@keyframes conciergeSpeakingGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 50px var(--ai-color-speaking-glow))
      drop-shadow(0 0 100px rgba(147, 197, 253, 0.3));
    transform: scale(1);
  }
  50% {
    filter:
      drop-shadow(0 0 70px var(--ai-color-speaking))
      drop-shadow(0 0 140px rgba(147, 197, 253, 0.4));
    transform: scale(1.015);
  }
}

/* Indicator text below orb - state-aware colors */
.concierge-indicator {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ai-color-dormant);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  min-height: 18px;
  opacity: 0;
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* Indicator colors match AI state */
.concierge-orb.concierge-listening + .concierge-indicator,
.concierge-orb-wrapper:has(.concierge-listening) .concierge-indicator {
  color: var(--ai-color-listening);
}

.concierge-orb.concierge-thinking + .concierge-indicator,
.concierge-orb-wrapper:has(.concierge-thinking) .concierge-indicator {
  color: var(--ai-color-thinking);
}

.concierge-orb.concierge-speaking + .concierge-indicator,
.concierge-orb-wrapper:has(.concierge-speaking) .concierge-indicator {
  color: var(--ai-color-speaking);
}

.concierge-indicator.active {
  opacity: 1;
}

/* Caption box - clean, transparent */
.concierge-caption {
  min-height: 48px;
  max-height: 100px;
  width: 100%;
  padding: 0 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  overflow-y: auto;
  letter-spacing: 0.01em;
}

/* Typewriter cursor effect */
.concierge-caption.typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: rgba(90, 139, 255, 0.8);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cursorBlink 0.8s steps(1) infinite;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Begin now - ghost button, sleek */
.concierge-begin-btn {
  padding: 8px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 16px;
}

.concierge-begin-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

/* Light theme adjustments */
:root[data-theme="light"] .concierge-overlay,
body.light-mode .concierge-overlay,
.theme-light .concierge-overlay {
  background: #f8f9fc;
}

:root[data-theme="light"] .concierge-bg-gradient,
body.light-mode .concierge-bg-gradient,
.theme-light .concierge-bg-gradient {
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(90, 139, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 30% 20%, rgba(90, 139, 255, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse 50% 60% at 70% 80%, rgba(120, 80, 200, 0.03) 0%, transparent 40%),
    linear-gradient(180deg, #f5f7fc 0%, #eef1f8 50%, #f5f7fc 100%);
}

:root[data-theme="light"] .concierge-bg-particles span,
body.light-mode .concierge-bg-particles span,
.theme-light .concierge-bg-particles span {
  background: rgba(90, 139, 255, 0.4);
  box-shadow: 0 0 6px rgba(90, 139, 255, 0.3);
}

:root[data-theme="light"] .concierge-caption,
body.light-mode .concierge-caption,
.theme-light .concierge-caption {
  color: var(--color-text, #1f2030);
}

:root[data-theme="light"] .concierge-begin-btn,
body.light-mode .concierge-begin-btn,
.theme-light .concierge-begin-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .concierge-begin-btn:hover,
body.light-mode .concierge-begin-btn:hover,
.theme-light .concierge-begin-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"] .concierge-indicator,
body.light-mode .concierge-indicator,
.theme-light .concierge-indicator {
  color: var(--color-accent, #5a8bff);
}

/* Animation-aware transitions */
[data-animations="off"] .concierge-overlay {
  transition: none;
}

[data-animations="off"] .concierge-container {
  animation: none;
  transform: scale(1);
  opacity: 1;
}

[data-animations="off"] .concierge-bg-gradient {
  animation: none;
}

[data-animations="off"] .concierge-bg-particles span {
  animation: none;
  opacity: 0.5;
}

[data-animations="off"] .concierge-orb-img,
[data-animations="off"] .concierge-orb.concierge-idle .concierge-orb-img,
[data-animations="off"] .concierge-orb.concierge-listening .concierge-orb-img,
[data-animations="off"] .concierge-orb.concierge-thinking .concierge-orb-img,
[data-animations="off"] .concierge-orb.concierge-speaking .concierge-orb-img {
  animation: none;
}

[data-animations="off"] .concierge-level-bars span {
  animation: none;
  height: 16px;
}

[data-animations="off"] .concierge-caption.typing::after {
  animation: none;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .concierge-container {
    padding: 32px 20px;
    gap: 28px;
  }

  .concierge-orb {
    width: 140px;
    height: 140px;
  }

  .concierge-orb-img {
    width: 110px;
    height: 110px;
  }

  .concierge-caption {
    font-size: 1.1rem;
  }
}

/* ===============================================
   ENHANCED MODE - Control Panel Animations & Polish
   Toggle: [data-animations="on"] on <html> or .enhanced-mode class
   =============================================== */

/* Enhanced Mode Variables */
[data-animations="on"],
.enhanced-mode {
  --enhance-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --enhance-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --enhance-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --enhance-snap: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --enhance-duration-fast: 150ms;
  --enhance-duration: 250ms;
  --enhance-duration-slow: 400ms;
  --enhance-glow-primary: rgba(102, 126, 234, 0.4);
  --enhance-glow-accent: rgba(118, 75, 226, 0.35);
  --enhance-shimmer-start: rgba(255, 255, 255, 0);
  --enhance-shimmer-mid: rgba(255, 255, 255, 0.12);
  --enhance-shimmer-end: rgba(255, 255, 255, 0);
}

/* ===== ENHANCED SIDEBAR ===== */
[data-animations="on"] .sidebar,
.enhanced-mode .sidebar {
  transition:
    transform var(--enhance-duration) var(--enhance-smooth),
    box-shadow var(--enhance-duration) var(--enhance-smooth),
    opacity var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .sidebar:hover,
.enhanced-mode .sidebar:hover {
  box-shadow:
    0 0 40px -10px var(--enhance-glow-primary),
    var(--shadow-elevated);
}

/* ===== ENHANCED WORKSPACE PANEL GLOW ===== */
[data-animations="on"] .workspace-panel,
.enhanced-mode .workspace-panel {
  transition:
    box-shadow var(--enhance-duration) var(--enhance-smooth),
    transform var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .workspace-panel:hover,
.enhanced-mode .workspace-panel:hover {
  box-shadow:
    0 0 40px -10px var(--enhance-glow-primary),
    0 0 60px -20px var(--enhance-glow-accent),
    var(--shadow-elevated);
}

/* ===== ENHANCED TAB BUTTONS ===== */
[data-animations="on"] .sidebar-tabs,
.enhanced-mode .sidebar-tabs {
  position: relative;
}

[data-animations="on"] .tab-btn,
.enhanced-mode .tab-btn {
  position: relative;
  overflow: hidden;
  transition:
    all var(--enhance-duration) var(--enhance-spring),
    transform var(--enhance-duration-fast) var(--enhance-spring);
}

/* Tab button ripple effect */
[data-animations="on"] .tab-btn::before,
.enhanced-mode .tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity var(--enhance-duration-fast) ease;
  pointer-events: none;
}

[data-animations="on"] .tab-btn:hover::before,
.enhanced-mode .tab-btn:hover::before {
  opacity: 1;
}

/* Tab button hover lift */
[data-animations="on"] .tab-btn:hover,
.enhanced-mode .tab-btn:hover {
  transform: translateY(-2px);
}

[data-animations="on"] .tab-btn:active,
.enhanced-mode .tab-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Active tab glow pulse - Projects tab (no subtabs) keeps pulse */
[data-animations="on"] .tab-btn[data-tab="projects"].active,
.enhanced-mode .tab-btn[data-tab="projects"].active {
  animation: enhancedTabPulse 2s ease-in-out infinite;
}

/* Current Project tab - glow only, no pulse (subtabs will pulse instead) */
[data-animations="on"] .tab-btn[data-tab="current"].active,
.enhanced-mode .tab-btn[data-tab="current"].active {
  box-shadow:
    0 0 12px 1px var(--enhance-glow-primary),
    var(--tab-shadow-active, var(--shadow-elevated));
  animation: none;
}

@keyframes enhancedTabPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 var(--enhance-glow-primary),
      var(--tab-shadow-active, var(--shadow-elevated));
  }
  50% {
    box-shadow:
      0 0 16px 2px var(--enhance-glow-primary),
      var(--tab-shadow-active, var(--shadow-elevated));
  }
}

/* Active tab indicator slide */
[data-animations="on"] .tab-btn.active::after,
.enhanced-mode .tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
  animation: enhancedTabIndicator 0.3s var(--enhance-spring) forwards;
}

@keyframes enhancedTabIndicator {
  from {
    width: 0%;
    opacity: 0;
  }
  to {
    width: 40%;
    opacity: 1;
  }
}

/* ===== ENHANCED SUB-TABS & DATA TABS ===== */
[data-animations="on"] .subtab-btn,
[data-animations="on"] .data-primary-tab-btn,
.enhanced-mode .subtab-btn,
.enhanced-mode .data-primary-tab-btn {
  position: relative;
  overflow: hidden;
  transition: all var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .subtab-btn:hover,
[data-animations="on"] .data-primary-tab-btn:hover:not(.disabled),
.enhanced-mode .subtab-btn:hover,
.enhanced-mode .data-primary-tab-btn:hover:not(.disabled) {
  transform: translateY(-1px);
  background: var(--interactive-bg-hover);
}

/* All tab hierarchy buttons pulse together in sync */
[data-animations="on"] .subtab-btn.active,
[data-animations="on"] .data-primary-tab-btn.active,
[data-animations="on"] .data-inner-tab-btn.active,
[data-animations="on"] .media-inner-tab-btn.active,
.enhanced-mode .subtab-btn.active,
.enhanced-mode .data-primary-tab-btn.active,
.enhanced-mode .data-inner-tab-btn.active,
.enhanced-mode .media-inner-tab-btn.active {
  animation: enhancedTabPulseSync 3.5s ease-in-out infinite;
}

/* Synchronized pulse for all active tabs - box-shadow only, no size change */
@keyframes enhancedTabPulseSync {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--enhance-glow-secondary, rgba(99, 102, 241, 0.3));
  }
  50% {
    box-shadow: 0 0 12px 3px var(--enhance-glow-secondary, rgba(99, 102, 241, 0.5));
  }
}

/* ===== ENHANCED MEDIA & DATA INNER TABS ===== */
/* Same hover/active behavior as subtabs */
[data-animations="on"] .media-inner-tab-btn,
[data-animations="on"] .data-inner-tab-btn,
.enhanced-mode .media-inner-tab-btn,
.enhanced-mode .data-inner-tab-btn {
  position: relative;
  overflow: hidden;
  transition: all var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .media-inner-tab-btn:hover,
[data-animations="on"] .data-inner-tab-btn:hover,
.enhanced-mode .media-inner-tab-btn:hover,
.enhanced-mode .data-inner-tab-btn:hover {
  transform: translateY(-1px);
  background: var(--interactive-bg-hover);
}

/* Inner tab active animation is handled by the unified enhancedTabPulseSync rule above */

/* ===== ENHANCED PROJECT LIST ===== */
[data-animations="on"] .projects-list,
.enhanced-mode .projects-list {
  scroll-behavior: smooth;
}

/* Project list item base */
[data-animations="on"] .projects-list li,
.enhanced-mode .projects-list li {
  position: relative;
  transition:
    all var(--enhance-duration) var(--enhance-smooth),
    transform var(--enhance-duration-fast) var(--enhance-spring);
  transform-origin: left center;
}

/* Staggered entry animation */
[data-animations="on"] .projects-list li.animate-in,
.enhanced-mode .projects-list li.animate-in {
  animation: enhancedListItemIn 0.4s var(--enhance-spring) forwards;
  animation-delay: calc(var(--item-index, 0) * 50ms);
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes enhancedListItemIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Project item hover effects */
[data-animations="on"] .projects-list li:hover,
.enhanced-mode .projects-list li:hover {
  transform: translateX(4px);
  background: var(--interactive-bg-hover);
}

[data-animations="on"] .projects-list li:hover::before,
.enhanced-mode .projects-list li:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, var(--color-accent), var(--enhance-glow-accent));
  border-radius: 0 3px 3px 0;
  animation: enhancedListIndicator 0.2s var(--enhance-spring) forwards;
}

@keyframes enhancedListIndicator {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 60%;
    opacity: 1;
  }
}

/* Active project glow */
[data-animations="on"] .projects-list li.active,
.enhanced-mode .projects-list li.active {
  box-shadow:
    inset 0 0 0 1px var(--color-accent),
    0 0 20px -5px var(--enhance-glow-primary);
}

[data-animations="on"] .projects-list li:active,
.enhanced-mode .projects-list li:active {
  transform: scale(0.98);
}

/* ===== ENHANCED ICON BUTTONS ===== */
[data-animations="on"] .icon-btn,
.enhanced-mode .icon-btn {
  position: relative;
  overflow: hidden;
  transition:
    all var(--enhance-duration-fast) var(--enhance-spring),
    box-shadow var(--enhance-duration) var(--enhance-smooth);
}

/* Icon button hover effects */
[data-animations="on"] .icon-btn:hover,
.enhanced-mode .icon-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px -2px var(--enhance-glow-primary);
}

[data-animations="on"] .icon-btn:hover i,
.enhanced-mode .icon-btn:hover i {
  animation: enhancedIconBounce 0.4s var(--enhance-bounce);
}

@keyframes enhancedIconBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.2); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.1); }
}

[data-animations="on"] .icon-btn:active,
.enhanced-mode .icon-btn:active {
  transform: translateY(0) scale(0.95);
}

/* Add button special animation */
[data-animations="on"] #add-btn:hover i,
.enhanced-mode #add-btn:hover i {
  animation: enhancedAddSpin 0.5s var(--enhance-spring);
}

@keyframes enhancedAddSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(90deg) scale(1.2); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Delete button danger pulse */
[data-animations="on"] #delete-btn:hover,
.enhanced-mode #delete-btn:hover {
  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.4);
}

[data-animations="on"] #delete-btn:hover i,
.enhanced-mode #delete-btn:hover i {
  animation: enhancedDeleteShake 0.4s ease;
}

@keyframes enhancedDeleteShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-5deg); }
  40% { transform: translateX(2px) rotate(5deg); }
  60% { transform: translateX(-2px) rotate(-3deg); }
  80% { transform: translateX(2px) rotate(3deg); }
}

/* ===== ENHANCED SEARCH INPUT ===== */
[data-animations="on"] .sidebar-search,
.enhanced-mode .sidebar-search {
  position: relative;
  transition: all var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .sidebar-search input,
.enhanced-mode .sidebar-search input {
  transition:
    all var(--enhance-duration) var(--enhance-smooth),
    box-shadow var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .sidebar-search:focus-within,
.enhanced-mode .sidebar-search:focus-within {
  transform: scale(1.02);
}

[data-animations="on"] .sidebar-search input:focus,
.enhanced-mode .sidebar-search input:focus {
  box-shadow:
    0 0 0 3px var(--focus-ring-strong),
    0 4px 16px -4px var(--enhance-glow-primary);
}

/* Search icon animation */
[data-animations="on"] .sidebar-search:focus-within i,
.enhanced-mode .sidebar-search:focus-within i {
  animation: enhancedSearchPulse 0.5s var(--enhance-spring);
  color: var(--color-accent);
}

@keyframes enhancedSearchPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ===== ENHANCED FORM INPUTS ===== */
[data-animations="on"] .info-form input,
[data-animations="on"] .info-form textarea,
[data-animations="on"] .info-form select,
.enhanced-mode .info-form input,
.enhanced-mode .info-form textarea,
.enhanced-mode .info-form select {
  transition:
    all var(--enhance-duration) var(--enhance-smooth),
    box-shadow var(--enhance-duration) var(--enhance-smooth),
    border-color var(--enhance-duration-fast) ease;
}

[data-animations="on"] .info-form input:focus,
[data-animations="on"] .info-form textarea:focus,
[data-animations="on"] .info-form select:focus,
.enhanced-mode .info-form input:focus,
.enhanced-mode .info-form textarea:focus,
.enhanced-mode .info-form select:focus {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px var(--focus-ring-strong),
    0 8px 20px -8px var(--enhance-glow-primary);
}

/* Label float animation */
[data-animations="on"] .info-field:focus-within .info-label,
.enhanced-mode .info-field:focus-within .info-label {
  color: var(--color-accent);
  animation: enhancedLabelPop 0.25s var(--enhance-spring);
}

@keyframes enhancedLabelPop {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* ===== ENHANCED CONTENT TRANSITIONS ===== */
[data-animations="on"] .sidebar-content,
.enhanced-mode .sidebar-content {
  transition:
    opacity var(--enhance-duration-slow) var(--enhance-smooth),
    transform var(--enhance-duration-slow) var(--enhance-smooth);
}

[data-animations="on"] .sidebar-content.hidden,
.enhanced-mode .sidebar-content.hidden {
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
}

[data-animations="on"] .sidebar-content:not(.hidden),
.enhanced-mode .sidebar-content:not(.hidden) {
  animation: enhancedContentIn 0.35s var(--enhance-spring);
}

@keyframes enhancedContentIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Subtab content transitions */
[data-animations="on"] .subtab-content,
.enhanced-mode .subtab-content {
  transition:
    opacity var(--enhance-duration) var(--enhance-smooth),
    transform var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .subtab-content.hidden,
.enhanced-mode .subtab-content.hidden {
  opacity: 0;
  transform: translateY(8px);
}

[data-animations="on"] .subtab-content:not(.hidden),
.enhanced-mode .subtab-content:not(.hidden) {
  animation: enhancedSubtabContentIn 0.3s var(--enhance-spring);
}

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

/* ===== ENHANCED SKELETON LOADERS ===== */
[data-animations="on"] .skeleton,
.enhanced-mode .skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--color-panel) 0%,
    var(--interactive-bg) 50%,
    var(--color-panel) 100%
  );
  background-size: 200% 100%;
  animation: enhancedShimmer 1.5s infinite linear;
  border-radius: var(--radius-md);
}

@keyframes enhancedShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton variations */
[data-animations="on"] .skeleton-text,
.enhanced-mode .skeleton-text {
  height: 1em;
  width: 80%;
  margin-bottom: 0.5em;
}

[data-animations="on"] .skeleton-title,
.enhanced-mode .skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
}

[data-animations="on"] .skeleton-avatar,
.enhanced-mode .skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

[data-animations="on"] .skeleton-button,
.enhanced-mode .skeleton-button {
  height: 36px;
  width: 100px;
  border-radius: var(--radius-md);
}

/* ===== ENHANCED THUMBNAIL HOVER ===== */
[data-animations="on"] .info-thumbnail,
.enhanced-mode .info-thumbnail {
  transition:
    all var(--enhance-duration) var(--enhance-smooth),
    box-shadow var(--enhance-duration-slow) var(--enhance-smooth);
  cursor: pointer;
}

[data-animations="on"] .info-thumbnail:hover,
.enhanced-mode .info-thumbnail:hover {
  transform: scale(1.08);
  box-shadow:
    0 16px 40px -8px rgba(0, 0, 0, 0.35),
    0 0 0 3px var(--color-accent);
}

[data-animations="on"] .info-thumbnail:active,
.enhanced-mode .info-thumbnail:active {
  transform: scale(0.98);
}

/* ===== ENHANCED CATEGORY CHIPS ===== */
[data-animations="on"] .category-chip,
[data-animations="on"] .info-categories .chip,
.enhanced-mode .category-chip,
.enhanced-mode .info-categories .chip {
  transition:
    all var(--enhance-duration-fast) var(--enhance-spring),
    box-shadow var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .category-chip:hover,
[data-animations="on"] .info-categories .chip:hover,
.enhanced-mode .category-chip:hover,
.enhanced-mode .info-categories .chip:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px -4px var(--enhance-glow-primary);
}

/* Chip entry animation */
[data-animations="on"] .category-chip.animate-in,
[data-animations="on"] .info-categories .chip.animate-in,
.enhanced-mode .category-chip.animate-in,
.enhanced-mode .info-categories .chip.animate-in {
  animation: enhancedChipIn 0.3s var(--enhance-bounce) forwards;
}

@keyframes enhancedChipIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Chip remove animation */
[data-animations="on"] .category-chip.removing,
[data-animations="on"] .info-categories .chip.removing,
.enhanced-mode .category-chip.removing,
.enhanced-mode .info-categories .chip.removing {
  animation: enhancedChipOut 0.2s var(--enhance-smooth) forwards;
}

@keyframes enhancedChipOut {
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* ===== ENHANCED POI LIST ===== */
[data-animations="on"] .poi-list li,
.enhanced-mode .poi-list li {
  transition:
    all var(--enhance-duration) var(--enhance-smooth),
    transform var(--enhance-duration-fast) var(--enhance-spring);
}

[data-animations="on"] .poi-list li:hover,
.enhanced-mode .poi-list li:hover {
  transform: translateX(4px);
  background: var(--interactive-bg-hover);
}

[data-animations="on"] .poi-list li:active,
.enhanced-mode .poi-list li:active {
  transform: scale(0.98);
}

/* ===== ENHANCED SCROLLBAR ===== */
[data-animations="on"] .projects-list::-webkit-scrollbar-thumb,
[data-animations="on"] .poi-list::-webkit-scrollbar-thumb,
.enhanced-mode .projects-list::-webkit-scrollbar-thumb,
.enhanced-mode .poi-list::-webkit-scrollbar-thumb {
  transition: background var(--enhance-duration) ease;
}

[data-animations="on"] .projects-list:hover::-webkit-scrollbar-thumb,
[data-animations="on"] .poi-list:hover::-webkit-scrollbar-thumb,
.enhanced-mode .projects-list:hover::-webkit-scrollbar-thumb,
.enhanced-mode .poi-list:hover::-webkit-scrollbar-thumb {
  background: var(--color-accent);
}

/* ===== ENHANCED GLASSMORPHISM ===== */
[data-animations="on"][data-glass="true"] .sidebar,
.enhanced-mode.glass-mode .sidebar {
  background: rgba(26, 26, 46, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"][data-animations="on"][data-glass="true"] .sidebar,
[data-theme="light"] .enhanced-mode.glass-mode .sidebar {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ===== ENHANCED BUTTON STATES ===== */
[data-animations="on"] .btn-primary,
[data-animations="on"] .btn-secondary,
.enhanced-mode .btn-primary,
.enhanced-mode .btn-secondary {
  position: relative;
  overflow: hidden;
  transition:
    all var(--enhance-duration) var(--enhance-spring),
    box-shadow var(--enhance-duration) var(--enhance-smooth);
}

[data-animations="on"] .btn-primary:hover,
.enhanced-mode .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px -4px var(--enhance-glow-primary),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

[data-animations="on"] .btn-primary:active,
.enhanced-mode .btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Button shine effect */
[data-animations="on"] .btn-primary::after,
.enhanced-mode .btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

[data-animations="on"] .btn-primary:hover::after,
.enhanced-mode .btn-primary:hover::after {
  transform: translateX(100%);
}

/* ===== ENHANCED SUCCESS/ERROR STATES ===== */
[data-animations="on"] .success-flash,
.enhanced-mode .success-flash {
  animation: enhancedSuccessFlash 0.5s var(--enhance-spring);
}

@keyframes enhancedSuccessFlash {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50% { box-shadow: 0 0 20px 4px rgba(16, 185, 129, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

[data-animations="on"] .error-shake,
.enhanced-mode .error-shake {
  animation: enhancedErrorShake 0.5s var(--enhance-smooth);
}

@keyframes enhancedErrorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ===== ENHANCED LOADING SPINNER ===== */
[data-animations="on"] .loading-spinner,
.enhanced-mode .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: enhancedSpin 0.8s linear infinite;
}

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

/* ===== DISABLE ENHANCED MODE FOR REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  [data-animations="on"] *,
  .enhanced-mode * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== ENHANCED MODE SETTINGS TOGGLE ===== */
/* Controlled via Settings dropdown toggle */
.settings-toggle-row.enhanced-toggle {
  position: relative;
}

.settings-toggle-row.enhanced-toggle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-accent), #764be2);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-toggle-row.enhanced-toggle.active::before {
  opacity: 1;
}

/* Enhanced mode indicator in navbar */
.enhanced-indicator {
  display: none;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--color-accent), #764be2);
  border-radius: 50%;
  animation: enhancedIndicatorPulse 2s ease-in-out infinite;
}

[data-animations="on"] .enhanced-indicator {
  display: block;
}

@keyframes enhancedIndicatorPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(102, 126, 234, 0.3);
    transform: scale(1.1);
  }
}

/* ==========================================================================
   CUSTOM TOOLTIPS - JavaScript-powered, Theme-aware
   Uses data-tooltip attribute (converted from title by tooltips.js)
   ========================================================================== */

/* The tooltip element (appended to body by JS) */
.custom-tooltip {
  position: absolute;
  z-index: 100000;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: 320px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  transform: translateY(4px);
  word-wrap: break-word;

  /* Dark mode default - matching theme */
  background: linear-gradient(135deg, var(--color-panel, #1e1e2e) 0%, var(--surface-elevated, #252538) 100%);
  color: var(--color-text, #e7e7ea);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.custom-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* When tooltip appears below the element */
.custom-tooltip.tooltip-below {
  transform: translateY(-4px);
}

.custom-tooltip.tooltip-below.visible {
  transform: translateY(0);
}

/* Light mode tooltip */
[data-theme="light"] .custom-tooltip {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  color: #1a1a2e;
  border: 1px solid rgba(36, 42, 90, 0.15);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Disabled element tooltip - "Coming soon" style */
.custom-tooltip.tooltip-disabled {
  background: linear-gradient(135deg, #4a4e69, #3d405b);
  color: #b8bbd0;
  font-style: italic;
}

[data-theme="light"] .custom-tooltip.tooltip-disabled {
  background: linear-gradient(135deg, #e8e9ed, #d1d3dc);
  color: #6b6f85;
}

/* Hide native tooltips completely - title converted to data-tooltip by JS */
[data-tooltip] {
  /* Elements with data-tooltip shouldn't show native tooltips */
}