@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* Speech-to-text transcription button states (voice commands disabled) */
.vmo-mic-btn.conversation {
  background: linear-gradient(90deg, #4a90e2 60%, #357ab8 100%);
  color: #fff;
  box-shadow: 0 0 8px #4a90e280;
  border: 2px solid #357ab8;
}
.vmo-mic-btn.listening {
  background: linear-gradient(90deg, #f5a623 60%, #e67e22 100%);
  color: #fff;
  box-shadow: 0 0 8px #f5a62380;
  border: 2px solid #e67e22;
}
.vmo-mic-btn.transcribing {
  background: linear-gradient(90deg, #7ed321 60%, #417505 100%);
  color: #fff;
  box-shadow: 0 0 8px #7ed32180;
  border: 2px solid #417505;
}
/* VMO AI Builder CSS v7.0.5 - PURE GLASS LUMINOUS THEME */
/* Last modified: July 24, 2025 - LED GLOW EFFECTS ACTIVE */
/* Note: Inspector panel was removed in v8; legacy styles below are harmless and can be pruned later. */

/* === Super Glassy Grouped Inspector Panel === */
#vmo-grouped-inspector.vmo-glass-grouped-panel {
    background: rgba(18, 32, 54, 0.82);
    box-shadow: 0 12px 48px 0 rgba(0,255,255,0.18), 0 1.5px 12px #00f0ff33;
    border: 2px solid rgba(0,255,255,0.22);
    backdrop-filter: blur(32px) saturate(180%) brightness(1.18);
    -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.18);
    border-radius: 22px;
    padding: 12px;
    min-width: 220px;
    color: #eaffff;
    transition: box-shadow 0.25s, border 0.25s, background 0.25s;
}

.vmo-grouped-header {
    text-align: center;
    margin-bottom: 12px;
    font-weight: 600;
    color: #00e2ff;
    font-size: 16px;
    letter-spacing: 0.04em;
    background: linear-gradient(120deg, #00e2ff 0%, #0f3340 100%);
    border-radius: 18px 18px 8px 8px;
    box-shadow: 0 2px 12px #00f0ff22;
    padding: 14px 0 12px 0;
    user-select: none;
    cursor: move;
}
/* === Super Glassy Floating Inspector Panel === */
.vmo-floating-panel.vmo-glass-panel {
    background: rgba(18, 32, 54, 0.72);
    box-shadow: 0 12px 48px 0 rgba(0,255,255,0.18), 0 1.5px 12px #00f0ff33;
    border: 2px solid rgba(0,255,255,0.22);
    backdrop-filter: blur(32px) saturate(180%) brightness(1.18);
    -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.18);
    transition: box-shadow 0.25s, border 0.25s, background 0.25s;
    color: #eaffff;
}

.vmo-floating-panel .vmo-floating-header {
    background: linear-gradient(120deg, #00e2ff 0%, #0f3340 100%);
    color: #fff;
    padding: 18px 24px;
    cursor: move;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1.5px solid rgba(0,255,255,0.13);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 2px 12px #00f0ff22;
    letter-spacing: 0.02em;
}

.vmo-floating-panel .vmo-close-floating {
    background: rgba(255,255,255,0.13);
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 1px 6px #00f0ff22;
}
.vmo-floating-panel .vmo-close-floating:hover {
    background: rgba(0,255,255,0.22);
    color: #00e2ff;
}

.vmo-floating-panel .vmo-floating-content {
    padding: 24px 22px 22px 22px;
    max-height: 480px;
    overflow-y: auto;
    background: transparent;
    border-radius: 0 0 22px 22px;
}
.vmo-builder-container {
  font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
  background: rgba(13, 18, 30, 0.78);
  color: #c9f8ff;
  max-width: 1800px;
  margin: 32px auto 0 auto;
  padding: 24px 32px 32px 32px;
  border-radius: 18px;
  box-shadow: 0 12px 48px #00f0ff33, 0 1px 3px #00162277;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1.5px solid rgba(0,255,255,0.10);
  overflow: hidden;
}

/* === Header === */
.vmo-builder-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid rgba(0,255,255,0.12);
  margin-bottom: 22px;
  background: rgba(0,0,0,0.18);
  border-radius: 13px 13px 0 0;
  box-shadow: 0 2px 16px #00f0ff11;
  flex-wrap: wrap;
}
.vmo-logo {
  height: 48px;
  width: 48px;
  background: rgba(0,0,0,0.1);
  border-radius: 14px;
  box-shadow: 0 2px 18px #00f0ff55;
}
.vmo-plugin-name-short {
  font-size: 1.38rem;
  letter-spacing: 0.08em;
  color: #55ffff;
  text-shadow: 0 1px 12px #00f0ff66;
  margin-right: auto;
  white-space: nowrap;
  flex-shrink: 1;
}

.vmo-plan-display {
  color: #666;
}

.vmo-plan-display.vmo-plan-display--expired {
  color: #55ffff;
}
.vmo-token-balance {
  font-size: 1.14rem;
  color: #85fff7;
  letter-spacing: 0.06em;
  background: rgba(0,255,255,0.08);
  padding: 8px 18px;
  border-radius: 12px;
  box-shadow: 0 2px 8px #00f0ff15;
  white-space: nowrap;
  margin-right: 0;
}

.vmo-upgrade-toggle-group {
  position: relative;
  display: inline-block;
}
.vmo-btn-metallic {
  background: linear-gradient(120deg, #bbd2e8 12%, #333 58%, #edf6f9 99%);
  color: #02d3ff;
  border: 1.5px solid #b2f4ff55;
  box-shadow: 0 1px 4px #00fff211, 0 0 0 transparent;
  border-radius: 50%;
  padding: 10px 13px 10px 14px;
  min-width: 44px;
  min-height: 44px;
  max-width: 48px;
  max-height: 48px;
  outline: none;
  font-size: 1.42rem;
  position: relative;
  transition: box-shadow .22s, background .15s;
}
.vmo-btn-metallic:hover,
.vmo-btn-primary:hover,
.vmo-btn-upgrade:hover,
.vmo-btn-publish:hover,
.vmo-btn-send:hover,
.vmo-btn-draft:hover,
.vmo-btn-undo:hover,
.vmo-btn-alt:hover,
.vmo-btn-danger:hover,
.vmo-plan-btn:hover {
  box-shadow: 0 0 15px #00f0ff88, 0 0 4px #1fffffcc, 0 1px 10px #00fff244;
  background: linear-gradient(120deg, #e0fdff 6%, #4df6f1 58%, #0f3340 100%);
  color: #121a3e !important;
}

/* Download Log Button Styles */
.vmo-download-log-container {
  margin: 15px 0;
  padding: 20px;
  background: rgba(0, 22, 34, 0.3);
  border: 1px solid rgba(0, 228, 255, 0.2);
  border-radius: 12px;
  text-align: center;
}

.vmo-download-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(0, 226, 255, 0.1) 0%, rgba(15, 51, 64, 0.8) 100%);
  border: 2px solid rgba(0, 226, 255, 0.3);
  border-radius: 10px;
  color: #00e2ff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  text-decoration: none;
  font-family: 'Orbitron', sans-serif;
}

.vmo-download-log-btn:hover {
  background: linear-gradient(135deg, rgba(0, 226, 255, 0.2) 0%, rgba(15, 51, 64, 0.9) 100%);
  border-color: rgba(0, 226, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 226, 255, 0.3);
  transform: translateY(-2px);
  color: #ffffff;
}

.vmo-download-log-btn svg {
  transition: transform 0.3s ease;
}

.vmo-download-log-btn:hover svg {
  transform: translateY(2px);
}

/* Multi-Agent Refinement System Styles */
.vmo-agent-context-indicator {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(0, 22, 34, 0.4);
  border: 1px solid rgba(0, 226, 255, 0.3);
  border-radius: 8px;
  font-size: 12px;
}

.vmo-context-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.vmo-context-agent {
  color: #00e2ff;
  font-weight: 600;
}

.vmo-context-scope {
  color: #a0d8e0;
}

.vmo-context-confidence {
  color: #4ade80;
  font-size: 11px;
}

.vmo-smart-suggestions {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 22, 34, 0.2);
  border: 1px solid rgba(0, 226, 255, 0.2);
  border-radius: 8px;
}

.vmo-suggestions-header {
  color: #00e2ff;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 8px;
}

.vmo-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vmo-suggestion-btn {
  padding: 4px 8px;
  background: rgba(0, 226, 255, 0.1);
  border: 1px solid rgba(0, 226, 255, 0.3);
  border-radius: 4px;
  color: #00e2ff;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vmo-suggestion-btn:hover {
  background: rgba(0, 226, 255, 0.2);
  border-color: rgba(0, 226, 255, 0.5);
}

.vmo-processing-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.vmo-processing-content {
  background: rgba(13, 18, 30, 0.95);
  border: 2px solid rgba(0, 226, 255, 0.3);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.vmo-processing-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 226, 255, 0.3);
  border-top: 3px solid #00e2ff;
  border-radius: 50%;
  animation: vmo-spin 1s linear infinite;
  margin: 0 auto 15px;
}

.vmo-processing-text {
  color: #00e2ff;
  font-weight: 600;
  font-size: 14px;
}

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

.vmo-upgrade-icon {
  font-size: 1.16em;
  pointer-events: none;
  vertical-align: middle;
}

/* Upgrade Plan Menu */
.vmo-upgrade-menu {
  display: none;
  position: absolute;
  top: 120%;
  right: 0;
  z-index: 99;
  min-width: 170px;
  background: rgba(13, 36, 53, 0.97);
  box-shadow: 0 6px 40px #0ff9, 0 1px 12px #3ff5;
  border-radius: 15px;
  border: 1.5px solid #13fff744;
  padding: 12px 6px 12px 6px;
  flex-direction: column;
  animation: vmoSlideDown .35s cubic-bezier(0.4, 0.82, 0.51, 1.22);
  backdrop-filter: blur(18px) saturate(1.5);
}
.vmo-upgrade-menu.open { display: flex; }
@keyframes vmoSlideDown {
  from { transform: translateY(-22px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.vmo-plan-row { margin: 3px 0; }
.vmo-plan-btn {
  width: 100%;
  background: linear-gradient(90deg, #0ee3ee1c 60%, #9af8fa0f 100%);
  color: #71e5fc;
  font-size: 1.05rem;
  padding: 8px 0;
  margin: 2px 0;
  border-radius: 9px;
  border: 1.5px solid #38fafdcc;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 0 0 transparent;
  outline: none;
  transition: background .17s, color .2s, box-shadow .18s;
}
.vmo-plan-btn.selected,
.vmo-plan-btn:active {
  background: linear-gradient(90deg, #10ffff66 60%, #007aff33 100%);
  color: #093242;
  box-shadow: 0 0 15px #00f0ff88, 0 0 4px #1fffff88;
}

.vmo-btn {
  font-family: inherit;
  background: rgba(0,255,255,0.09);
  color: #00e2ff;
  border: 1.5px solid #27f7ff80;
  border-radius: 13px;
  font-size: 1rem;
  padding: 8px 18px;
  margin-left: 10px;
  cursor: pointer;
  box-shadow: 0 0 0 transparent;
  transition: background .2s, box-shadow .2s, color .2s;
  backdrop-filter: blur(4px);
}

/* Button Variants (still minimal by default, glow on hover) */
.vmo-btn-primary,
.vmo-btn-publish {
  background: linear-gradient(90deg, #10ffff66 60%, #007aff33 100%);
  color: #0ff;
  font-weight: bold;
  border: 1.5px solid #38fafdcc;
}
.vmo-btn-upgrade {
  background: linear-gradient(90deg, #e0fffd44 20%, #05c7ff55 100%);
  color: #16e0ff;
  font-weight: bold;
  border: 1.5px solid #7ef9ffbb;
}
.vmo-btn-draft {
  background: linear-gradient(90deg, #0ee3ee1c 60%, #9af8fa0f 100%);
  color: #71e5fc;
  font-weight: bold;
}
.vmo-btn-send {
  background: linear-gradient(90deg, #1effe9aa 50%, #80fbf333 100%);
  color: #fff;
}
.vmo-btn-undo,
.vmo-btn-alt {
  background: linear-gradient(90deg, #14586928, #1b8c9433 80%);
  color: #75edff;
}
.vmo-btn-danger {
  background: linear-gradient(90deg, #ff4d4d28, #ff666633 80%);
  color: #ff9999;
  border: 1.5px solid #ff666680;
}
.vmo-btn-code {
  font-size: 1.03em;
  color: #99fdff;
  background: rgba(0,255,255,0.06);
  margin-left: 0;
}

.vmo-btn-wide {
  min-width: 110px;
  max-width: 150px;
  border-radius: 13px !important;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 1.07rem;
  font-weight: 600;
}
.vmo-main-flex {
  display: flex;
  gap: 34px;
  margin-top: 10px;
  min-height: 650px;
  align-items: stretch;
}
.vmo-chat-panel {
  display: none !important;
}

.vmo-theme-align-row {
  margin-bottom: 12px;
  color: #9cecf6;
  font-size: 1rem;
  letter-spacing: 0.01em;
  background: rgba(0,255,255,0.07);
  border-radius: 7px;
  padding: 6px 13px 6px 5px;
  box-shadow: 0 1px 7px #00f0ff15;
  display: flex;
  align-items: center;
  gap: 6px;
}
#vmo-theme-align {
  accent-color: #00f0ff;
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

.vmo-preview-panel {
  order: 1;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  background: rgba(23, 40, 63, 0.29);
  border-radius: 17px;
  padding: 16px 0 0 0;
  box-shadow: 0 1px 24px #0ff5 0 2px 14px #04aee733;
  border: 1.5px solid rgba(0,255,255,0.10);
  display: flex;
  flex-direction: column;
  position: relative;
}
.vmo-preview-header {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(0,255,255,0.07);
  padding: 8px 32px 8px 24px;
  border-radius: 15px 15px 0 0;
  color: #97f8ff;
  font-size: 1.16rem;
  border-bottom: 1.5px solid #00f0ff29;
  box-shadow: 0 1px 12px #00f0ff21;
}
.vmo-preview-iframe {
  border: none;
  width: 100%;
  min-height: 1000px;
  background: #ffffff;
  border-radius: 0 0 14px 14px;
  margin-top: 0;
  box-shadow: 0 4px 40px #00fff211;
  overflow: auto;
  /* High-quality rendering optimizations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Hardware acceleration for smooth animations */
  transform: translateZ(0);
  will-change: contents;
  /* Prevent layout shifts */
  contain: layout style paint;
  /* Smooth scrolling for better UX */
  scroll-behavior: smooth;
  /* Better touch handling on mobile */
  -webkit-overflow-scrolling: touch;
}

.vmo-builder-danger-zone {
  margin: 16px auto 6px;
  width: min(100%, 1180px);
  border: 1px solid rgba(98, 225, 255, 0.26);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(5, 20, 36, 0.82), rgba(7, 44, 63, 0.72));
  box-shadow: 0 18px 40px rgba(0, 14, 29, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.vmo-builder-danger-zone summary {
  cursor: pointer;
  padding: 12px 18px;
  font-weight: 700;
  color: #e5fbff;
  list-style: none;
  background: linear-gradient(90deg, rgba(64, 196, 255, 0.16), rgba(0, 240, 255, 0.08));
  letter-spacing: 0.02em;
}

.vmo-builder-danger-zone summary::-webkit-details-marker {
  display: none;
}

.vmo-builder-danger-zone-body {
  padding: 14px 18px 18px;
}

.vmo-builder-danger-copy {
  margin: 0 0 8px;
  color: #d3efff;
  line-height: 1.5;
}

.vmo-builder-danger-copy-muted {
  color: #96cfe0;
  font-size: 0.95rem;
}

.vmo-builder-danger-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.vmo-reset-backups-panel {
  margin-top: 12px;
}

.vmo-reset-backups-list {
  display: grid;
  gap: 10px;
}
.vmo-code-view {
  width: 100%;
  min-height: 1000px;
  background: rgba(5, 21, 38, 0.94);
  border-radius: 0 0 14px 14px;
  font-size: 1.08rem;
  color: #8cffff;
  padding: 24px;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.52;
  box-shadow: 0 1px 24px #00e7ff27;
  display: none;
}

.vmo-chat-history {
  /* Expand to fill available vertical space above input */
  flex: 1 1 auto;
  min-height: 0; /* allow proper flexbox scrolling */
  overflow-y: auto;
  background: rgba(0, 255, 255, 0.05);
  border-radius: 9px;
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: 0 1px 8px #00e2ff19;
}
.vmo-chat-msg {
  margin: 0 0 7px 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 1.04rem;
  line-height: 1.55;
  box-shadow: 0 1px 3px #00e2ff22;
  word-break: break-word;
}
.vmo-chat-input-container {
  position: relative;
  display: flex;
  width: 100%;
}

.vmo-chat-input {
  width: 100%;
  /* Reduced min-height so history can use space; still comfortable typing area */
  min-height: 140px;
  max-height: 60vh;
  font-size: 1.08em;
  padding: 18px 80px 18px 16px; /* Increased right padding for two buttons */
  border-radius: 12px;
  border: 2px solid #00e4ff;
  background: rgba(23, 30, 40, 0.99);
  color: #e6fcff;
  resize: vertical;
  box-shadow: 0 2px 12px rgba(0,255,255,0.09);
  transition: border 0.18s, box-shadow 0.18s;
}

.vmo-chat-input:focus {
  border-color: #00f8ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,255,255,0.11);
}

/* VSCode-style input controls container */
.vmo-input-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

/* VSCode-style input buttons */
.vmo-input-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(0, 228, 255, 0.1);
  color: #00e4ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0.7;
}

.vmo-input-btn:hover {
  background: rgba(0, 228, 255, 0.2);
  opacity: 1;
  transform: scale(1.05);
}

.vmo-input-btn:active {
  transform: scale(0.95);
}

.vmo-input-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Media Integration Button - distinct green accent */
.vmo-input-media-btn {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
}

.vmo-input-media-btn:hover {
  background: rgba(0, 255, 136, 0.3);
  color: #00ff99;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Business consultation starter button */
.vmo-btn-business-start {
  width: 100%;
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  color: #ffffff;
  border: 2px solid #00ff88;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.2);
  text-transform: none;
}

.vmo-btn-business-start:hover {
  background: linear-gradient(135deg, #00ff88 0%, #00b359 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 255, 136, 0.3);
}

/* Wizard input controls (VSCode-style) - VERIFIED UNIFIED AUG 4, 2025 */
.vmo-wizard-input-container {
  position: relative;
  width: 100%;
  z-index: 1000000; /* Ensure proper layering */
}

.vmo-wizard-input-container textarea {
  width: 100%;
  padding-right: 80px; /* Space for two buttons */
}

.vmo-wizard-input-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 1000001;
}

.vmo-wizard-input-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 8px;
  border: 1px solid rgba(0, 228, 255, 0.4);
  border-radius: 6px;
  background: rgba(0, 228, 255, 0.15);
  color: #00e4ff;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 1000001;
  flex-shrink: 0;
  box-sizing: border-box;
}

.vmo-wizard-input-btn:hover {
  background: rgba(0, 228, 255, 0.2);
  opacity: 1;
  transform: scale(1.05);
}

/* Voice status indicator - hide when controls are positioned absolutely */
#vmo-wizard-voice-status {
  display: none !important;
}

.vmo-wizard-input-btn:active {
  transform: scale(0.95);
}

/* Recording state - professional pulsing animation */
.vmo-wizard-input-btn.vmo-recording {
  background: rgba(255, 0, 0, 0.15) !important;
  border-color: rgba(255, 0, 0, 0.5) !important;
  animation: pulse-recording 1.5s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.3);
}

@keyframes pulse-recording {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
  }
}

/* Ensure icons/SVGs stay centered and professional */
.vmo-wizard-input-btn svg {
  max-width: 16px;
  max-height: 16px;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

/* Typing indicator styles */
.vmo-typing-indicator {
  opacity: 0.7;
}

.vmo-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 0;
}

.vmo-typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e4ff;
  animation: vmo-typing-bounce 1.4s infinite ease-in-out;
}

.vmo-typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.vmo-typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes vmo-typing-bounce {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Business Plan Loading and Editor Styles */
.vmo-plan-loading {
  text-align: center;
  padding: 40px 20px;
}

.vmo-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 228, 255, 0.3);
  border-top: 4px solid #00e4ff;
  border-radius: 50%;
  animation: vmo-spin 1s linear infinite;
  margin: 0 auto 20px;
}

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

.vmo-plan-content {
  background: rgba(0, 22, 34, 0.3);
  border: 1px solid rgba(0, 228, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  max-height: 400px;
  overflow-y: auto;
}

.vmo-plan-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.vmo-plan-editor {
  padding: 20px;
}

.vmo-plan-textarea {
  width: 100%;
  min-height: 400px;
  background: rgba(0, 22, 34, 0.5);
  border: 1px solid rgba(0, 228, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.vmo-plan-textarea:focus {
  outline: none;
  border-color: #00e4ff;
  box-shadow: 0 0 0 2px rgba(0, 228, 255, 0.2);
}

.vmo-editor-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.vmo-plan-error {
  text-align: center;
  padding: 40px 20px;
  color: #ff6b6b;
}

/* Multi-Agent System Styles */
.vmo-multi-agent-deployment {
  padding: 20px;
}

.vmo-agent-progress {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.vmo-agent-item {
  display: flex;
  align-items: center;
  background: rgba(0, 22, 34, 0.3);
  border: 1px solid rgba(0, 228, 255, 0.2);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.vmo-agent-item.active {
  border-color: #00e4ff;
  background: rgba(0, 228, 255, 0.1);
  box-shadow: 0 0 10px rgba(0, 228, 255, 0.3);
}

.vmo-agent-item.complete {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
}

.vmo-agent-item.error {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.vmo-agent-icon {
  font-size: 24px;
  margin-right: 15px;
  min-width: 40px;
  text-align: center;
}

.vmo-agent-info {
  flex: 1;
}

.vmo-agent-info h4 {
  margin: 0 0 5px 0;
  color: #00e4ff;
  font-size: 16px;
}

.vmo-agent-info p {
  margin: 0;
  color: #cccccc;
  font-size: 14px;
}

.vmo-agent-status {
  font-size: 20px;
  min-width: 30px;
  text-align: center;
}

.vmo-multi-agent-results {
  padding: 20px;
}

.vmo-agent-result {
  background: rgba(0, 22, 34, 0.3);
  border: 1px solid rgba(0, 228, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.vmo-agent-result h4 {
  color: #00e4ff;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 228, 255, 0.2);
}

.vmo-agent-content {
  line-height: 1.6;
}

.vmo-results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 228, 255, 0.2);
}

.vmo-implementation-progress {
  padding: 20px;
}

.vmo-progress-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.vmo-progress-item {
  display: flex;
  align-items: center;
  background: rgba(0, 22, 34, 0.3);
  border: 1px solid rgba(0, 228, 255, 0.2);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.vmo-progress-item.active {
  border-color: #00e4ff;
  background: rgba(0, 228, 255, 0.1);
  box-shadow: 0 0 10px rgba(0, 228, 255, 0.3);
}

.vmo-progress-icon {
  font-size: 20px;
  margin-right: 15px;
  min-width: 30px;
}

.vmo-progress-status {
  margin-left: auto;
  font-size: 18px;
}

.vmo-wizard-input-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.vmo-chat-input-row {
  /* ...your existing styles... */
  margin-bottom: 6px;   /* smaller gap to favor chat history height */
}

/* Legacy send button styles - kept for backward compatibility */

.vmo-action-row {
  display: flex;
  gap: 10px;
  margin-bottom: 2px;
}

/* === Centered Toast === */
.vmo-toast {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  max-width: 430px;
  background: rgba(18,255,255,0.19);
  color: #0ff;
  font-size: 1.23rem;
  font-weight: 600;
  padding: 18px 38px;
  border-radius: 19px;
  box-shadow: 0 8px 52px #00eaffee, 0 1px 10px #0098ff65;
  border: 2px solid #20f7ffd8;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.5);
}
.vmo-toast-success { color: #0f0; border-color: #27fdad; }
.vmo-toast-error { color: #ff4e4e; border-color: #ff8484; }
.vmo-toast-info { color: #22ffff; }

/* Loading animation for generation toasts */
.vmo-toast-loading {
    animation: vmoSimplePulse 1.5s infinite;
}

@keyframes vmoSimplePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1.0; }
}

/* --- Plans Hover Banner (Plan Description Banners) --- */
.vmo-plan-desc-banner {
  display: none;
  position: absolute;
  top: 0;
  right: 110%;
  min-width: 340px;
  max-width: 420px;
  background: linear-gradient(110deg, #0d1a2e 87%, #41e8f720 100%);
  color: #c9f8ff;
  border-radius: 16px;
  border: 1.5px solid #13fff7bb;
  box-shadow: 0 2px 30px #00fff522, 0 1px 10px #00fffd33;
  padding: 26px 32px 20px 24px;
  z-index: 120;
  font-size: 1.13rem;
  line-height: 1.7;
  pointer-events: none;
  animation: vmoFadeIn .32s cubic-bezier(.38,1.2,.36,1.08);
  transition: opacity .16s, box-shadow .16s;
}

.vmo-plan-desc-banner h3 {
  margin: 0 0 8px 0;
  color: #70ffff;
  font-size: 1.27rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 12px #00f0ff33;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vmo-plan-price {
  color: #ffe664;
  font-weight: 700;
  font-size: 1.11rem;
  margin-left: 13px;
  text-shadow: 0 1px 8px #ffe66455;
}

.vmo-plan-row {
  position: relative;
}

@keyframes vmoFadeIn {
  from { opacity: 0; transform: translateY(-16px) scale(.95);}
  to   { opacity: 1; transform: translateY(0) scale(1);}
}

/* --- Keep banners on screen at mobile (show below button) --- */
@media (max-width: 900px) {
  .vmo-plan-desc-banner {
    right: auto;
    left: 0;
    top: 125%;
    min-width: 200px;
    max-width: 95vw;
    font-size: 1.01rem;
    padding: 18px 16px 16px 13px;
  }
}

#vmo_load_project_btn.vmo-btn {
  font-weight: 600;
  background: linear-gradient(120deg, #bbd2e8 12%, #333 58%, #edf6f9 99%);
  color: #02d3ff;
  border-radius: 13px !important;
  min-width: 110px;
  max-width: 150px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 1.07rem;
  border: 1.5px solid #27f7ff80;
  box-shadow: 0 0 0 transparent;
  transition: background .2s, box-shadow .2s, color .2s;
}
#vmo_load_project_btn.vmo-btn:focus,
#vmo_load_project_btn.vmo-btn:hover {
  box-shadow: 0 0 15px #00f0ff88, 0 0 4px #1fffffcc, 0 1px 10px #00fff244;
  background: linear-gradient(120deg, #e0fdff 6%, #4df6f1 58%, #0f3340 100%);
  color: #121a3e !important;
}

.vmo-footer {
  text-align: center;
  font-size: 1.09rem;
  color: #91e9ff;
  font-weight: 600;
  margin-top: 22px;
  padding-top: 16px;
  background: transparent;
  border-top: 1px solid rgba(0,255,255,0.12);
  letter-spacing: .02em;
}
.vmo-footer a {
  color: #00e7ff;
  font-weight: 700;
  text-decoration: underline;
}

.vmo-load-menu {
  background: rgba(13, 36, 53, 0.99);
  box-shadow: 0 6px 40px #0ff9, 0 1px 12px #3ff5;
  border-radius: 15px;
  border: 1.5px solid #13fff744;
  padding: 12px 6px 12px 6px;
  min-width: 220px;
  right: 0;
  left: auto;
  top: 120%;
  z-index: 9999;
  display: none;
  flex-direction: column;
  animation: vmoSlideDown .35s cubic-bezier(0.4, 0.82, 0.51, 1.22);
  backdrop-filter: blur(18px) saturate(1.5);
}

.vmo-load-menu.open { display: flex; }

.vmo-load-btn {
  width: 100%;
  background: linear-gradient(90deg, #0ee3ee1c 60%, #9af8fa0f 100%);
  color: #71e5fc;
  font-size: 1.05rem;
  padding: 8px 0;
  margin: 2px 0;
  border-radius: 9px;
  border: 1.5px solid #38fafdcc;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 0 0 transparent;
  outline: none;
  transition: background .17s, color .2s, box-shadow .18s;
  text-align: left;
}
.vmo-load-btn:hover,
.vmo-load-btn.selected {
  background: linear-gradient(90deg, #10ffff66 60%, #007aff33 100%);
  color: #093242;
  box-shadow: 0 0 15px #00f0ff88, 0 0 4px #1fffff88;
}

.vmo-load-toggle-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.vmo-load-menu {
  position: absolute !important;
  top: 120%;
  left: 0;
  right: auto;
  z-index: 9999;
}

/* Fix toast close button */
.vmo-toast {
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto; /* Allow interaction */
  padding-right: 48px; /* Leave space for close icon */
  position: fixed;
}

.vmo-toast-close {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  z-index: 999999;
  text-shadow: 0 1px 6px #000;
}

.vmo-btn-glow {
    box-shadow: 0 0 18px 4px #00f7ffbb, 0 0 40px #f5e66455;
    animation: vmoGlowPulse 1.4s infinite alternate;
}
@keyframes vmoGlowPulse {
  0% { box-shadow: 0 0 18px 4px #00f7ffbb; }
  100% { box-shadow: 0 0 30px 10px #f5e664cc; }
}

/* === 🌗 Enhanced Light Mode Styles (replaces existing light-mode section) === */
body.vmo-light-mode .vmo-builder-container {
  background: #f2f7fc;
  color: #0c2c3e;
}
body.vmo-light-mode .vmo-chat-panel {
  background: #ffffff;
  color: #222;
  box-shadow: 0 1px 12px #ccc;
}
body.vmo-light-mode .vmo-preview-panel {
  background: #f9f9f9;
}
body.vmo-light-mode .vmo-chat-msg.user {
  background: #def3ff;
  color: #0c2c3e;
}
body.vmo-light-mode .vmo-chat-msg.ai {
  background: #f1fffd;
  color: #145;
}
body.vmo-light-mode .vmo-btn {
  background: #e5faff;
  color: #007199;
  border-color: #7fdcff;
}
body.vmo-light-mode .vmo-btn-metallic,
body.vmo-light-mode .vmo-plan-btn,
body.vmo-light-mode .vmo-load-btn {
  color: #005f73 !important;
}
body.vmo-light-mode .vmo-token-balance {
  background: #d1f8ff;
  color: #005f73;
}
body.vmo-light-mode .vmo-builder-header,
body.vmo-light-mode .vmo-upgrade-menu,
body.vmo-light-mode .vmo-load-menu {
  background: #f4fcff;
  color: #0c2c3e;
}
body.vmo-light-mode .vmo-plugin-name-short,
body.vmo-light-mode .vmo-preview-header,
body.vmo-light-mode .vmo-plan-desc-banner h3,
body.vmo-light-mode .vmo-footer {
  color: #0b2b40 !important;
  text-shadow: none;
}
body.vmo-light-mode .vmo-plan-desc-banner {
  background: #ffffff;
  color: #0c2c3e;
  border-color: #00bcd4;
  box-shadow: 0 2px 12px #00bcd455;
}

/* Toast fix */
body.vmo-light-mode .vmo-toast {
  background: #e0f7fa;
  color: #004d40;
  border-color: #00bcd4;
  box-shadow: 0 8px 52px #00bcd4aa, 0 1px 10px #0097a7aa;
}
body.vmo-light-mode .vmo-toast-success {
  color: #2e7d32;
  border-color: #66bb6a;
}
body.vmo-light-mode .vmo-toast-error {
  color: #c62828;
  border-color: #ef5350;
}
body.vmo-light-mode .vmo-toast-info {
  color: #0277bd;
}
body.vmo-light-mode .vmo-toast-close {
  color: #333;
  text-shadow: none;
}

/* 🌐 Toggle Button Example (optional) */
#vmo-theme-toggle {
  cursor: pointer;
  font-size: 1.2rem;
  background: none;
  border: none;
  color: inherit;
  padding: 4px 10px;
}

/* === 📱 Responsive Font & Layout === */
@media (max-width: 1024px) {
  .vmo-builder-container {
    padding: 20px;
    font-size: 0.95rem;
  }
  .vmo-chat-panel,
  .vmo-preview-panel {
    flex: 1 1 100%;
  }
  .vmo-main-flex {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .vmo-chat-input,
  .vmo-chat-msg {
    font-size: 0.93rem;
  }
  .vmo-btn {
    padding: 6px 14px;
    font-size: 0.9rem;
  }
}

.vmo-toast-action-btn {
    background: #0073aa;
    color: #fff;
    padding: 6px 14px;
    margin: 6px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.vmo-toast-action-btn:hover {
    background: #005f8d;
}

.vmo-toast-loading {
    animation: vmoGlowPulse 1.6s infinite;
}

@keyframes vmoGlowPulse {
    0% { box-shadow: 0 0 0px rgba(0, 255, 255, 0.2); }
    50% { box-shadow: 0 0 18px rgba(0, 255, 255, 0.5); }
    100% { box-shadow: 0 0 0px rgba(0, 255, 255, 0.2); }
}

#vmo-toast-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    backdrop-filter: blur(4px);
}

.vmo-toast-loading {
    animation: vmoSimplePulse 1.5s infinite;
}

@keyframes vmoSimplePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1.0; }
}

/* === CREDIT ENFORCEMENT TOAST === */
/* Persuasive toast shown when subscription credit runs out */
.vmo-credit-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
    border: 2px solid #ff9500;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 8px 32px rgba(255, 149, 0, 0.3), 0 0 60px rgba(255, 149, 0, 0.15);
    max-width: 500px;
    width: 90%;
    animation: vmoCreditSlideIn 0.4s ease-out;
}

@keyframes vmoCreditSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.vmo-credit-toast-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.vmo-credit-toast-icon {
    font-size: 36px;
    margin-bottom: 10px;
    animation: vmoIconPulse 2s infinite;
}

@keyframes vmoIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.vmo-credit-toast-message {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.vmo-credit-toast-message p {
    margin: 0;
    color: #e8e8e8;
}

.vmo-credit-toast-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.vmo-credit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
}

.vmo-credit-btn-topup {
    background: linear-gradient(135deg, #0fe1ff 0%, #00b8d4 100%);
    color: #0a0f16;
    box-shadow: 0 4px 15px rgba(15, 225, 255, 0.4);
}

.vmo-credit-btn-topup:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 225, 255, 0.5);
    color: #0a0f16;
}

.vmo-credit-btn-upgrade {
    background: linear-gradient(135deg, #7c5cff 0%, #b347ea 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(124, 92, 255, 0.4);
}

.vmo-credit-btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 92, 255, 0.5);
    color: #fff;
}

.vmo-credit-toast-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border: none;
    background: #444;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background 0.2s;
}

.vmo-credit-toast-close:hover {
    background: #ff4e4e;
}

/* Light mode support */
body.vmo-light-mode .vmo-credit-toast {
    background: linear-gradient(135deg, #fff 0%, #f5f0ff 100%);
    border-color: #ff9500;
}

body.vmo-light-mode .vmo-credit-toast-message,
body.vmo-light-mode .vmo-credit-toast-message p {
    color: #333;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .vmo-credit-toast {
        padding: 16px 18px;
        max-width: 95%;
    }
    
    .vmo-credit-toast-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .vmo-credit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* === END OF CREDIT TOAST STYLES === */

/* === END OF TOAST STYLES === */

/* MENU INSERTION MODAL */
.vmo-modal {
  /* Remove position: fixed, top, left, width, height, display, align-items, justify-content */
  background: #1a1a2e;
  color: #fff;
  padding: 30px;
  border-radius: 10px;
  min-width: 350px;
  position: relative;
  z-index: 10; /* Just enough to be above other inline elements */
}

.vmo-modal-content {
  background: #1a1a2e;
  color: #fff;
  padding: 30px;
  border-radius: 10px;
  min-width: 350px;
  position: relative;
  z-index: 100000;
  pointer-events: auto;
}

.vmo-modal-close {
  position: absolute;
  right: 15px; top: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 1000001;
}

.vmo-modal input, .vmo-modal select {
  margin: 5px 0 10px 0;
  width: 90%;
  color: #222;
}

.vmo-modal label {
  display: block;
  margin-top: 10px;
  color: #fff;
}

/* Prompt samples at top of chat */

/* =============================================
   Global Modal Overlay Normalization (Admin)
   Ensures all modals and their backdrops are
   full-screen and centered across the dashboard.
   ============================================= */
/* Unified Full-Screen Modal Utility (new pattern) */
.vmo-fs-modal {position:fixed;inset:0;display:none;align-items:center;justify-content:center;width:100vw;height:100vh;z-index:100000;}
.vmo-fs-modal.vmo-modal-visible {display:flex;}
.vmo-fs-modal > .vmo-modal-overlay {position:absolute;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(6px);}
.vmo-fs-modal > .vmo-modal-panel {position:relative;width:min(1100px,95vw);max-height:90vh;overflow:auto;background:linear-gradient(135deg,#0e1d29,#122e3f);border:1px solid rgba(0,255,255,0.15);box-shadow:0 10px 50px -5px #000,0 0 0 1px rgba(0,255,255,0.08);border-radius:18px;padding:30px 34px 26px;animation:vmoModalIn .28s ease;}
/* Enforce centering and prevent stray margins from shifting panels */
body.wp-admin .vmo-fs-modal { align-items: center !important; justify-content: center !important; }
body.wp-admin .vmo-fs-modal > .vmo-modal-panel { margin: 0 !important; }
/* Slightly wider actions panel but still centered */
#weeklyActionsModal.vmo-fs-modal > .vmo-modal-panel { width: min(1200px, 96vw); }

.vmo-fs-modal .modal-header {display:flex;align-items:center;justify-content:space-between;margin:-6px -6px 14px;padding:4px 6px 10px;border-bottom:1px solid rgba(0,255,255,0.08);}
.vmo-fs-modal .modal-title {margin:0;font-size:1.15rem;letter-spacing:.5px;color:#d1faff;font-weight:600;}
.vmo-fs-modal .modal-close {background:none;border:none;font-size:1.4rem;color:#7ad8e2;cursor:pointer;line-height:1;padding:2px 6px;}
.vmo-fs-modal .modal-close:hover {color:#fff;}
@keyframes vmoModalIn {from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}

/* LEGACY OVERRIDE REMOVED: Replaced by explicit .vmo-fs-modal usage.
  We intentionally neutralize previous blanket rules to prevent unintended blocking overlays. */
body.wp-admin .vmo-modal,
body.wp-admin .vmo-modal-overlay,
#vmo-insert-modal.vmo-modal,
#vmo-replace-modal.vmo-modal { /* legacy selector retained but no force styling */ pointer-events:auto; }

/* Default hidden state for legacy modal containers; JS must add .vmo-modal-visible OR inline display */
.vmo-modal:not(.vmo-modal-visible):not(.vmo-fs-modal) { display:none !important; }

/* Centered modal content with sane bounds */
body.wp-admin .vmo-modal .vmo-modal-content,
body.wp-admin .vmo-seo-modal,
body.wp-admin .vmo-contact-detail-content {
  width: min(92vw, 900px) !important;
  max-height: 90vh !important;
  overflow: auto !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

/* Optional: prevent background scroll when any VMO modal is open */
/* Remove background scroll lock tied to any .vmo-modal existence; will be handled per modal when opened */
/* body.wp-admin:has(.vmo-modal), body.wp-admin:has(.vmo-modal-overlay) { overflow:hidden; } */

/* Speech-to-text settings disabled (voice commands removed) */
#vmo-voice-settings-modal .vmo-modal-overlay { display: none !important; }
#vmo-voice-settings-modal.vmo-modal-visible .vmo-modal-overlay { display: none !important; }
.vmo-prompt-samples {
  margin-bottom: 12px;
  padding: 14px 12px;
  border-radius: 10px;
  background: rgba(0,255,255,0.07);
  color: #aefeff;
  box-shadow: 0 1px 12px #00f0ff15;
  font-size: 0.95rem;
}
/* =========================
   FS Modal Layering Fix
   ---------------------
   Guarantee overlay under panel and remove blur from panel for fs-modals.
   This prevents the modal content from appearing blurry.
   ========================= */
.vmo-fs-modal { z-index: 200000; }
.vmo-fs-modal > .vmo-modal-overlay {
  z-index: 1 !important;
  display: block !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vmo-fs-modal > .vmo-modal-panel {
  position: relative;
  z-index: 2 !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Admin-global safety: neutralize legacy overlay stacking/blur within wp-admin */
body.wp-admin .vmo-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* Fix: Only target the backdrop inside the wizard modal, avoiding conflict with shipping modal */
body.wp-admin .vmo-fs-modal > .vmo-modal-overlay { z-index: 1 !important; }
body.wp-admin .vmo-modal .vmo-modal-content, body.wp-admin .vmo-modal-panel {
  filter: none !important; -webkit-filter: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

#vmo-replace-modal.vmo-replace-media-modal.vmo-modal-visible {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  padding: 22px !important;
  background: rgba(0, 7, 18, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483647 !important;
  box-sizing: border-box !important;
}

body.wp-admin #vmo-replace-modal.vmo-replace-media-modal .vmo-media-replace-panel,
#vmo-replace-modal.vmo-replace-media-modal .vmo-media-replace-panel {
  background: linear-gradient(135deg, rgba(2,22,38,0.92), rgba(0,48,84,0.76)) !important;
  border: 1px solid rgba(0,226,255,0.38) !important;
  box-shadow: 0 30px 90px rgba(0,226,255,0.28), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(28px) saturate(170%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.08) !important;
}
.vmo-prompt-samples ul {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}
.vmo-prompt-samples li {
  padding: 6px 10px;
  margin: 4px 0;
  background: rgba(0,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.vmo-prompt-samples li:hover {
  background: rgba(0,255,255,0.18);
  color: #fff;
}

/* === INSERT IMAGE MODAL & OVERLAY === */
#vmo-insert-modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 200000;
  background: rgba(0,22,30,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vmoFadeIn .4s;
}
.vmo-modal-content {
  background: linear-gradient(120deg, #0f273c 70%, #00f0ff11 100%);
  color: #c9f8ff;
  border-radius: 18px;
  box-shadow: 0 8px 40px #00e7ff44;
  padding: 38px 38px 24px 38px;
  min-width: 340px;
  max-width: 97vw;
  min-height: 210px;
  position: relative;
  text-align: left;
  font-family: inherit;
}
.vmo-modal-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #3ef7ff;
  margin-bottom: 18px;
  letter-spacing: 0.03em;
}
.vmo-modal-content button.vmo-btn {
  margin-top: 9px;
  margin-bottom: 7px;
  display: block;
  width: 100%;
  font-size: 1.08rem;
}

#vmo-gen-form textarea,
#vmo-gen-desc {
  width: 97%;
  min-height: 62px;
  margin: 8px 0 8px 0;
  border-radius: 9px;
  border: 1.5px solid #0ef5ff51;
  background: rgba(22,44,68,0.18);
  color: #fff;
  font-size: 1.05rem;
  padding: 7px 10px;
  resize: vertical;
  outline: none;
  box-shadow: 0 1px 8px #00f0ff11;
}

#vmo-gen-form select {
  width: 90%;
  margin: 7px 0 10px 0;
  border-radius: 7px;
  border: 1px solid #00fff333;
  background: #072531;
  color: #7ee9ff;
  font-size: 1rem;
  padding: 5px 9px;
  outline: none;
}

/* === IMAGE WRAPPERS, OVERLAYS, GALLERY & CAROUSEL === */
.vmo-image-wrapper {
  display: inline-block;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 1px 12px #00eaff22;
  margin: 12px;
  transition: box-shadow .19s, transform .18s;
  background: rgba(0,255,255,0.02);
}
.vmo-image-wrapper:hover,
.vmo-image-wrapper:focus-within {
  box-shadow: 0 0 25px #00eaff77, 0 1px 20px #00eaff33;
  transform: scale(1.015) rotate(-1deg);
}


/* (You can further tweak font-size or background for lighter or darker themes if needed) */

.vmo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: 13px;
  background: rgba(0,255,255,0.04);
  padding: 15px 8px;
  margin: 14px 0;
  box-shadow: 0 1px 12px #00eaff18;
}

.vmo-carousel {
  display: flex;
  gap: 16px;
  border-radius: 13px;
  background: rgba(0,255,255,0.09);
  padding: 13px 8px;
  margin: 18px 0;
  overflow-x: auto;
  box-shadow: 0 2px 16px #00eaff19;
}

.vmo-gallery, .vmo-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  align-items: center;
  padding: 18px 0;
}

.vmo-gallery { flex-wrap: wrap; }
.vmo-carousel { overflow-x: auto; flex-wrap: nowrap; }

.vmo-image-wrapper {
  background: #02262620;
  border-radius: 9px;
  margin: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  min-height: 120px;
}

.vmo-size-1-6 img { width: 16.66%; min-width: 60px; height: 80px; object-fit: cover; }
.vmo-size-1-4 img { width: 25%; min-width: 90px; height: 90px; object-fit: cover; }
.vmo-size-1-2 img { width: 50%; min-width: 160px; height: 120px; object-fit: cover; }
.vmo-size-full img { width: 100%; min-width: 220px; height: 180px; object-fit: cover; }

.vmo-align-left { justify-content: flex-start; align-items: flex-start; }
.vmo-align-center { justify-content: center; align-items: center; }
.vmo-align-right { justify-content: flex-end; align-items: flex-end; }
.vmo-align-cover img { object-fit: cover !important; }
.vmo-align-top-center { align-items: flex-start; }

.vmo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px;
  align-items: center;
}

.swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.vmo-image-wrapper { position: relative; display: inline-block; }
.vmo-image-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2em; color: #b3c5cc; pointer-events: none;
  background: #fff;
}

/*NEW PLACEHOLDER*/
.vmo-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
  color: #555;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 8px;
  border: 2px dashed #aaa;
  margin: 24px auto;
  text-align: center;
  position: relative;
  user-select: none;
  overflow: hidden;
  min-width: 180px;
  min-height: 120px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.vmo-media-placeholder:hover {
  border-color: #00f8ff;
  box-shadow: 0 0 20px rgba(0, 248, 255, 0.3);
  transform: scale(1.02);
}

.vmo-media-placeholder[data-type="image"] {
  width: 400px;
  height: 260px;
  max-width: 100%;
  aspect-ratio: 16/10;
}

.vmo-media-placeholder[data-type="video"] {
  width: 900px;
  height: 420px;
  max-width: 100%;
  aspect-ratio: 21/9;
}

.vmo-media-placeholder span {
  pointer-events: none;
  color: #555;
  font-size: 1.2rem;
  font-weight: 600;
  opacity: 0.95;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* When media is loaded, hide the placeholder text */
.vmo-media-placeholder img,
.vmo-media-placeholder video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Replace button styling for media placeholders */
.vmo-replace-overlay {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 9999 !important;
  background: linear-gradient(135deg, #00f8ff 0%, #0099cc 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  font-size: 11px !important;
  color: #000 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(255,255,255,0.8) !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.vmo-replace-overlay:hover {
  background: linear-gradient(135deg, #00ffff 0%, #00aadd 100%) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0,248,255,0.5), 0 0 0 2px rgba(255,255,255,1) !important;
}

.vmo-image-wrapper, .vmo-img-placeholder, .vmo-block img { position: relative; }

/* SPINNER (global CSS) */
.vmo-spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 3px solid #ccc;
    border-top: 3px solid #0073e6;
    border-radius: 50%;
    animation: vmo-spin 1s linear infinite;
    vertical-align: middle;
}
@keyframes vmo-spin { 100% { transform: rotate(360deg); } }

.vmo-root section {
  position: relative;
  overflow: hidden;
}
.vmo-root button {
  position: relative;
  z-index: 10;
}

/* Ensure your plugin container is relatively positioned */
#vmo-ai-builder-main, .vmo-builder-container {
  position: relative;
}

/* Modal overlays only inside plugin */
#vmo-replace-modal, #vmo-insert-modal {
  position: absolute; /* Key: overlays INSIDE the plugin container */
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 150000;
  background: rgba(0,22,30,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vmoFadeIn .4s;
}

/* Modal content styling (keep your existing styles for .vmo-modal-content) */
.vmo-modal-content {
  background: linear-gradient(120deg, #0f273c 70%, #00f0ff11 100%);
  color: #c9f8ff;
  border-radius: 18px;
  box-shadow: 0 8px 40px #00e7ff44;
  padding: 38px 38px 24px 38px;
  min-width: 340px;
  max-width: 97vw;
  min-height: 210px;
  position: relative;
  text-align: left;
  font-family: inherit;
}



/* ──────────────────────────────────────────────────────────────
   ❸  Pure Glass Inspector Panel - Matching Plugin's Luminous Theme
   ────────────────────────────────────────────────────────────── */
#vmo-inspector-panel{
    position: fixed;
    top: 80px;
    right: -500px;                 /* off-canvas by default */
    width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 22px;
    border-radius: 18px;

    /* Pure glass with luminous teal hint */
    background: rgba(0, 255, 255, 0.03);
    backdrop-filter: blur(32px) saturate(180%) brightness(1.18);
    -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.18);
    box-shadow: 
        0 12px 48px rgba(0, 255, 255, 0.18),
        0 1.5px 12px rgba(0, 240, 255, 0.2),
        0 0 0 1.5px rgba(0, 255, 255, 0.12);

    color: #eaffff;
    font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    z-index: 60000;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border: 2px solid rgba(0, 255, 255, 0.22);
}

/* Wide preview panel variant for tools with preview capabilities */
#vmo-inspector-panel.preview-mode {
    width: 800px;
    max-width: 800px;
    height: 600px;
    max-height: 600px;
    right: -850px;
}

#vmo-inspector-panel.preview-mode.open {
    right: 24px;
}

/* panel visible */
#vmo-inspector-panel.open{ 
    right: 24px; 
    animation: slideInGlass 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes slideInGlass {
    from {
        right: -500px;
        opacity: 0;
        transform: translateX(50px) scale(0.95);
        box-shadow: 0 0 0 rgba(0, 255, 255, 0);
    }
    to {
        right: 24px;
        opacity: 1;
        transform: translateX(0) scale(1);
        box-shadow: 
            0 12px 48px rgba(0, 255, 255, 0.18),
            0 1.5px 12px rgba(0, 240, 255, 0.2);
    }
}

/* Inspector panel CSS removed (panel deprecated). */

/* Value display spans */
#vmo-inspector-panel span[id*="-value"] {
    color: #2d3436 !important;
    font-weight: 600 !important;
    background: rgba(78, 205, 196, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(78, 205, 196, 0.3);
}

/* Luminous glass close button */
.vmo-panel-close{
    position: absolute;
    top: 15px; 
    right: 15px;
    background: rgba(0, 255, 255, 0.1);
    border: 1.5px solid rgba(0, 255, 255, 0.3);
    color: #00e2ff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.vmo-panel-close:hover{
    background: rgba(0, 255, 255, 0.2);
    border-color: #00e2ff;
    color: #fff;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.6),
        0 0 40px rgba(0, 255, 255, 0.3),
        0 4px 12px rgba(0, 255, 255, 0.4);
    transform: scale(1.1);
}

.vmo-panel-close:active{
    transform: scale(0.95);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.8),
        0 0 60px rgba(0, 255, 255, 0.4);
}

/* Glass tool sections with luminous borders */
.vmo-tool-section {
    margin-bottom: 16px;
    padding: 15px;
    background: rgba(0, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-left: 3px solid #00e2ff;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    box-shadow: 
        0 2px 12px rgba(0, 255, 255, 0.1),
        -3px 0 8px rgba(0, 226, 255, 0.3);
}

.vmo-tool-section:hover {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.25);
    border-left-color: #55ffff;
    box-shadow: 
        0 4px 20px rgba(0, 255, 255, 0.2),
        -3px 0 15px rgba(0, 226, 255, 0.5),
        0 0 20px rgba(0, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Luminous accents for different tool types */
.vmo-tool-section:nth-child(2n) {
    border-left-color: #40e0d0;
    box-shadow: 
        0 2px 12px rgba(0, 255, 255, 0.1),
        -3px 0 8px rgba(64, 224, 208, 0.3);
}

.vmo-tool-section:nth-child(2n):hover {
    border-left-color: #7fffd4;
    box-shadow: 
        0 4px 20px rgba(0, 255, 255, 0.2),
        -3px 0 15px rgba(64, 224, 208, 0.5),
        0 0 20px rgba(64, 224, 208, 0.1);
}

.vmo-tool-section:nth-child(3n) {
    border-left-color: #1de9b6;
    box-shadow: 
        0 2px 12px rgba(0, 255, 255, 0.1),
        -3px 0 8px rgba(29, 233, 182, 0.3);
}

.vmo-tool-section:nth-child(3n):hover {
    border-left-color: #64ffda;
    box-shadow: 
        0 4px 20px rgba(0, 255, 255, 0.2),
        -3px 0 15px rgba(29, 233, 182, 0.5),
        0 0 20px rgba(29, 233, 182, 0.1);
}

/* Inspector panel buttons matching default plugin style */
.vmo-tool-btn {
    width: 100%;
    padding: 8px 18px;
    font-family: inherit;
    background: rgba(0,255,255,0.09);
    color: #00e2ff;
    border: 1.5px solid #27f7ff80;
    border-radius: 13px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 0 0 transparent;
    transition: background .2s, box-shadow .2s, color .2s;
    backdrop-filter: blur(4px);
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vmo-tool-btn:hover {
    box-shadow: 0 0 15px #00f0ff88, 0 0 4px #1fffffcc, 0 1px 10px #00fff244;
    background: linear-gradient(120deg, #e0fdff 6%, #4df6f1 58%, #0f3340 100%);
    color: #121a3e !important;
}

.vmo-tool-btn:active {
    transform: translateY(1px);
}

/* Action button variant - matching vmo-btn-primary */
.vmo-tool-btn.action,
.vmo-tool-btn[id*="apply"],
.vmo-tool-btn[id*="preview"] {
    background: linear-gradient(90deg, #10ffff66 60%, #007aff33 100%);
    color: #0ff;
    font-weight: bold;
    border: 1.5px solid #38fafdcc;
}

/* Toggle button variant - matching vmo-btn-upgrade */
.vmo-tool-btn.toggle,
.vmo-tool-btn[id*="toggle"],
.vmo-tool-btn[id*="enable"] {
    background: linear-gradient(90deg, #e0fffd44 20%, #05c7ff55 100%);
    color: #16e0ff;
    font-weight: bold;
    border: 1.5px solid #7ef9ffbb;
}

/* Remove/delete button variant - matching vmo-btn-alt */
.vmo-tool-btn[id*="remove"],
.vmo-tool-btn[id*="delete"],
.vmo-tool-btn[id*="clear"] {
    background: linear-gradient(90deg, #14586928, #1b8c9433 80%);
    color: #75edff;
}

.vmo-tool-btn-small {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 36px;
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmo-tool-btn-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Tool group styling */
.vmo-tool-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Modern clean form elements */
/* Removed legacy #vmo-inspector-panel selectors (fully purged). */

/* Modern clean range sliders */
#vmo-inspector-panel input[type="range"] {
    width: 100%;
    background: #e0e6ed;
    border-radius: 8px;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    margin: 10px 0;
    transition: all 0.3s ease;
}

#vmo-inspector-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4ecdc4;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);
}

#vmo-inspector-panel input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: #44a08d;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

#vmo-inspector-panel input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4ecdc4;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);
}

/* Modern clean color inputs */
#vmo-inspector-panel input[type="color"] {
    padding: 6px;
    height: 40px;
    width: 60px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #e0e6ed;
    background: white;
    transition: all 0.3s ease;
}

#vmo-inspector-panel input[type="color"]:hover {
    border-color: #bdc3c7;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#vmo-inspector-panel input[type="color"]:focus {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
}

/* Modern clean transparency section */
.vmo-transparency-section {
    margin-bottom: 16px;
    padding: 15px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 8px;
    border-left: 4px solid #3498db;
    transition: all 0.3s ease;
}

.vmo-transparency-section:hover {
    background: rgba(52, 152, 219, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
}

/* Modern clean scrollbar styling */
#vmo-inspector-panel::-webkit-scrollbar {
    width: 8px;
}

#vmo-inspector-panel::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 8px;
}

#vmo-inspector-panel::-webkit-scrollbar-thumb {
    background: #bdc3c7;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#vmo-inspector-panel::-webkit-scrollbar-thumb:hover {
    background: #95a5a6;
}

/* Special button states and effects */
.vmo-tool-btn.active,
.vmo-tool-btn-small.active {
    background: linear-gradient(135deg, 
        rgba(0, 255, 154, 0.4) 0%, 
        rgba(0, 255, 200, 0.3) 50%, 
        rgba(0, 255, 154, 0.45) 100%);
    color: #ffffff;
    border-color: rgba(0, 255, 154, 0.6);
    box-shadow: 
        0 0 20px rgba(0, 255, 154, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Premium glassy textarea */
#vmo-inspector-panel textarea {
    background: rgba(0, 35, 55, 0.4);
    color: #9cecf6;
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(6px);
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 80px;
}

#vmo-inspector-panel textarea:focus {
    outline: none;
    background: rgba(0, 45, 70, 0.5);
    border-color: rgba(0, 255, 255, 0.4);
    color: #ffffff;
    box-shadow: 
        0 0 12px rgba(0, 255, 255, 0.3),
        inset 0 1px 3px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Checkbox styling */
#vmo-inspector-panel input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00ff9a;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

/* Tool section headers */
.vmo-tool-section h4,
.vmo-tool-section h3 {
    color: #00ff9a !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    text-shadow: 0 0 6px rgba(0, 255, 154, 0.3);
    font-size: 1rem !important;
}

/* Loading states */
.vmo-tool-btn.loading {
    position: relative;
    color: transparent;
}

.vmo-tool-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-top-color: #00ffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Subtle glow effect for focused elements */
#vmo-inspector-panel *:focus {
    box-shadow: 
        0 0 0 3px rgba(0, 255, 255, 0.2),
        0 0 12px rgba(0, 255, 255, 0.3) !important;
}

/* Modern button states and effects */
.vmo-tool-btn.active,
.vmo-tool-btn-small.active {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

/* Modern textarea styling */
#vmo-inspector-panel textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e6ed;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    color: #2d3436;
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 80px;
    margin: 5px 0;
}

#vmo-inspector-panel textarea:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
}

/* Modern checkbox styling */
#vmo-inspector-panel input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4ecdc4;
    border-radius: 4px;
}

/* Modern section headers */
.vmo-tool-section h4,
.vmo-tool-section h3 {
    color: #2d3436 !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    font-size: 1rem !important;
}

/* Loading states */
.vmo-tool-btn.loading {
    position: relative;
    color: transparent;
}

.vmo-tool-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Focus states */
#vmo-inspector-panel *:focus {
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1) !important;
}

/* keep the Tools button text inside the pill */
#vmo-inspector-toggle{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* keep the selected element outlined */
.vmo-selected{
    outline:2px dashed #00e2ff !important;
}

/* show outline on hover */
[data-vmo-selectable]:hover{ outline:1px dashed #00e2ff }

/* keep outline after it has been clicked */
.vmo-selected{ outline:2px solid #00e2ff !important; }

/* optional – visual highlight inside iframe while Tools is open */
.vmo-selected img,
.vmo-selected video{ filter:brightness(1.05) }

/* persistent outline for the selected element */
.vmo-selected{
    outline:2px dashed #00e2ff !important;
    position: relative;
}

/* Value display for range sliders */
.vmo-tool-section span {
    font-size: 11px;
    color: #00e2ff;
    text-align: center;
    margin-top: 4px;
}

/* === Preset Toggle Buttons Styling === */
.vmo-preset-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.vmo-preset-btn {
  font-family: inherit;
  background: rgba(0,255,255,0.09);
  color: #00e2ff;
  border: 1.5px solid #27f7ff80;
  border-radius: 13px;
  font-size: 1rem;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 0 0 transparent;
  transition: background .2s, box-shadow .2s, color .2s;
  backdrop-filter: blur(4px);
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vmo-preset-btn:hover {
  background: rgba(0,255,255,0.15);
  box-shadow: 0 0 24px rgba(0,255,255,0.2);
  color: #0ff;
}

.vmo-preset-btn-active,
.vmo-preset-btn.active {
  background: linear-gradient(90deg, #10ffff66 60%, #007aff33 100%);
  color: #0ff;
  font-weight: bold;
  box-shadow: 0 0 24px rgba(0,255,255,0.3);
}

/* Light mode preset buttons */
body.vmo-light-mode .vmo-preset-btn {
  background: rgba(0,0,0,0.05);
  color: #0066cc;
  border: 1.5px solid #0066cc40;
}

body.vmo-light-mode .vmo-preset-btn:hover {
  background: rgba(0,0,0,0.1);
  box-shadow: 0 0 12px rgba(0,102,204,0.2);
  color: #004499;
}

body.vmo-light-mode .vmo-preset-btn-active,
body.vmo-light-mode .vmo-preset-btn.active {
  background: linear-gradient(90deg, #0066cc44 60%, #004499aa 100%);
  color: #004499;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(0,102,204,0.3);
}

/* === Preset Content Lists === */
.vmo-preset-content {
  display: none;
  margin-top: 8px;
}

.vmo-preset-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vmo-preset-content li {
  padding: 8px 12px;
  margin: 4px 0;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  border-left: 3px solid transparent;
}

.vmo-preset-content li:hover {
  background: rgba(0,255,255,0.1);
  border-left-color: #00e2ff;
  transform: translateX(4px);
}

/* Light mode preset content */
body.vmo-light-mode .vmo-preset-content li {
  background: rgba(0,0,0,0.02);
  border-left: 3px solid transparent;
}

body.vmo-light-mode .vmo-preset-content li:hover {
  background: rgba(0,102,204,0.1);
  border-left-color: #0066cc;
}

/* ====== V7.0.1 ZOOM EFFECT CONTROLS ====== */
.vmo-zoom-controls {
  background: rgba(13, 20, 35, 0.9);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  backdrop-filter: blur(8px);
}

.vmo-zoom-controls h4 {
  color: #55ffff;
  font-size: 14px;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vmo-zoom-state {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
}

.vmo-zoom-state-title {
  color: #85fff7;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.vmo-zoom-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}

.vmo-zoom-row label {
  color: #c9f8ff;
  font-size: 11px;
  min-width: 50px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vmo-zoom-input {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 4px;
  color: #85fff7;
  padding: 4px 8px;
  font-size: 11px;
  width: 60px;
  text-align: center;
}

.vmo-zoom-input:focus {
  outline: none;
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.vmo-zoom-preview-btn {
  background: linear-gradient(135deg, #0066cc, #00aaff);
  border: none;
  border-radius: 6px;
  color: white;
  padding: 6px 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 8px 0;
}

.vmo-zoom-preview-btn:hover {
  background: linear-gradient(135deg, #0088ff, #00ccff);
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.5);
}

.vmo-zoom-apply-btn {
  background: linear-gradient(135deg, #00aa44, #00dd66);
  border: none;
  border-radius: 6px;
  color: white;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
  margin-top: 12px;
}

.vmo-zoom-apply-btn:hover {
  background: linear-gradient(135deg, #00cc55, #00ff77);
  box-shadow: 0 0 15px rgba(0, 221, 102, 0.5);
}

.vmo-zoom-effect-active {
  border-color: #00ff88 !important;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important;
}

/* ====== SEO MODAL STYLES ====== */
.vmo-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vmo-fade-in 0.3s ease;
}

.vmo-seo-modal {
  background: linear-gradient(135deg, #0d1421 0%, #1a2332 100%);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: vmo-slide-up 0.4s ease;
}

.vmo-modal-header {
  background: rgba(0, 255, 255, 0.1);
  padding: 20px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vmo-modal-header h3 {
  color: #55ffff;
  margin: 0;
  font-size: 1.4rem;
  font-family: 'Orbitron', sans-serif;
}

.vmo-modal-close {
  background: none;
  border: none;
  color: #ff6b6b;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
  transition: color 0.2s;
}

.vmo-modal-close:hover {
  color: #ff4444;
}

.vmo-modal-body {
  padding: 20px;
  color: #c9f8ff;
}

.vmo-seo-section {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.vmo-seo-section h4 {
  color: #55ffff;
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  padding-bottom: 6px;
}

.vmo-seo-row {
  margin-bottom: 12px;
}

.vmo-seo-row label {
  display: block;
  color: #85fff7;
  font-size: 0.9rem;
  margin-bottom: 4px;
  font-weight: 500;
}

.vmo-seo-row input[type="text"],
.vmo-seo-row input[type="url"],
.vmo-seo-row input[type="tel"],
.vmo-seo-row textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 6px;
  color: #c9f8ff;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vmo-seo-row input:focus,
.vmo-seo-row textarea:focus {
  outline: none;
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.vmo-seo-row textarea {
  resize: vertical;
  min-height: 60px;
}

.vmo-seo-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vmo-seo-checkbox input[type="checkbox"] {
  width: auto;
  accent-color: #00ff9a;
}

.vmo-seo-checkbox label {
  margin: 0;
  cursor: pointer;
  flex: 1;
}

.vmo-modal-footer {
  background: rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.vmo-btn-primary {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.vmo-btn-primary:hover {
  background: linear-gradient(135deg, #5CBF60, #55b059);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}

.vmo-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #c9f8ff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
}

.vmo-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

@keyframes vmo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vmo-slide-up {
  from { 
    opacity: 0; 
    transform: translateY(30px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* === ADVANCED INSPECTOR TOOLS STYLING === */

/* Advanced Tools Section */
.vmo-tool-section.advanced-tools {
    border-left: 3px solid #ff6b6b;
    background: linear-gradient(135deg, rgba(255,107,107,0.1), rgba(255,107,107,0.05));
}

.vmo-tool-section.advanced-tools h4 {
    color: #ff6b6b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Shape Creator Styling */
.vmo-shape-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.vmo-shape-controls select,
.vmo-shape-controls input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

/* Button Creator Styling */
.vmo-btn-creator {
    background: rgba(52, 152, 219, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
}

.vmo-btn-styles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}

/* Hotspot Tool Styling */
.vmo-hotspot-controls {
    background: rgba(255, 193, 7, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
}

.vmo-hotspot-status {
    padding: 8px;
    background: rgba(255, 193, 7, 0.2);
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Resize Tool Styling */
.vmo-resize-controls {
    background: rgba(46, 204, 113, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #2ecc71;
}

.vmo-resize-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0;
}

/* Drag & Drop Tool Styling */
.vmo-drag-controls {
    background: rgba(155, 89, 182, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #9b59b6;
}

.vmo-drag-status {
    text-align: center;
    font-weight: 500;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    background: rgba(155, 89, 182, 0.1);
}

/* Created Shapes Styling */
.vmo-shape {
    transition: all 0.3s ease;
    position: relative;
}

.vmo-shape:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Hotspot Areas */
.vmo-hotspot {
    transition: all 0.2s ease;
    position: absolute;
    z-index: 1000;
}

.vmo-hotspot:hover {
    background: rgba(255, 107, 107, 0.2) !important;
    transform: scale(1.02);
}

/* Tool Buttons */
.vmo-tool-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vmo-tool-btn.create {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
}

.vmo-tool-btn.action {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
}

.vmo-tool-btn.toggle {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    color: #2d3436;
}

.vmo-tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.vmo-tool-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Advanced Input Styling */
.vmo-advanced-input {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e6ed;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    margin: 5px 0;
}

.vmo-advanced-input:focus {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
    outline: none;
}

/* Advanced Select Styling */
.vmo-advanced-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e6ed;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px 0;
}

.vmo-advanced-select:hover {
    border-color: #bdc3c7;
}

.vmo-advanced-select:focus {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
    outline: none;
}

/* === INSPECTOR PANEL BUTTON OVERRIDES (FINAL) === */
/* These rules MUST be at the end to override all other button styles */
.vmo-floating-panel .vmo-btn,
.vmo-inspector-panel .vmo-btn,
.vmo-tool-panel .vmo-btn,
.vmo-floating-content .vmo-btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: linear-gradient(135deg, rgba(0,40,40,0.9), rgba(0,60,60,0.8)) !important;
    color: rgba(0,255,255,1) !important;
    border: 2px solid rgba(0,255,255,0.6) !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
    padding: 10px 20px !important;
    margin: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 0 15px rgba(0,255,255,0.2) !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(4px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 80px !important;
    text-decoration: none !important;
    text-shadow: 0 0 8px rgba(0,255,255,0.3) !important;
}

.vmo-floating-panel .vmo-btn:hover,
.vmo-inspector-panel .vmo-btn:hover,
.vmo-tool-panel .vmo-btn:hover,
.vmo-floating-content .vmo-btn:hover {
    background: linear-gradient(135deg, rgba(0,60,60,0.95), rgba(0,80,80,0.9)) !important;
    box-shadow: 0 0 25px rgba(0,255,255,0.4), inset 0 0 20px rgba(0,255,255,0.1) !important;
    border-color: rgba(0,255,255,0.8) !important;
    color: rgba(0,255,255,1) !important;
    transform: translateY(-2px) scale(1.05) !important;
    text-shadow: 0 0 12px rgba(0,255,255,0.5) !important;
}

.vmo-floating-panel .vmo-btn-primary,
.vmo-inspector-panel .vmo-btn-primary,
.vmo-tool-panel .vmo-btn-primary,
.vmo-floating-content .vmo-btn-primary {
    background: linear-gradient(135deg, rgba(0,50,50,0.95), rgba(0,70,70,0.9)) !important;
    color: rgba(0,255,255,1) !important;
    font-weight: bold !important;
    border: 2px solid rgba(0,255,255,0.8) !important;
    box-shadow: 0 0 20px rgba(0,255,255,0.3) !important;
}

.vmo-floating-panel .vmo-btn-danger,
.vmo-inspector-panel .vmo-btn-danger,
.vmo-tool-panel .vmo-btn-danger,
.vmo-floating-content .vmo-btn-danger {
    background: linear-gradient(135deg, rgba(40,0,0,0.9), rgba(60,0,0,0.8)) !important;
    color: rgba(255,100,100,1) !important;
    border: 2px solid rgba(255,100,100,0.6) !important;
    box-shadow: 0 0 15px rgba(255,100,100,0.2) !important;
}

/* === INSPECTOR PANEL GROUP BUTTON OVERRIDES === */
.vmo-group-button {
    background: linear-gradient(135deg, rgba(0,40,40,0.9), rgba(0,60,60,0.8)) !important;
    border: 2px solid rgba(0,255,255,0.6) !important;
    color: rgba(0,255,255,1) !important;
    text-shadow: 0 0 12px rgba(0,255,255,0.4) !important;
    box-shadow: 0 0 15px rgba(0,255,255,0.2) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin-bottom: 12px !important;
}

.vmo-group-button:hover {
    background: linear-gradient(135deg, rgba(0,50,50,0.95), rgba(0,70,70,0.9)) !important;
    border-color: rgba(0,255,255,0.8) !important;
    box-shadow: 0 0 25px rgba(0,255,255,0.4), inset 0 0 20px rgba(0,255,255,0.1) !important;
    color: rgba(0,255,255,1) !important;
}

.vmo-group-button .vmo-group-arrow {
    color: rgba(0,255,255,1) !important;
}

/* === TOOL MENU STYLING === */
.vmo-tool-menu {
    background: linear-gradient(135deg, rgba(0,40,40,0.75), rgba(0,60,60,0.65)) !important;
    border: 1px solid rgba(0,255,255,0.3) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin-bottom: 16px !important;
}

.vmo-tool-button {
    color: rgba(0,255,255,1) !important;
    border-bottom: 1px solid rgba(0,255,255,0.1) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.vmo-tool-button:hover {
    background: linear-gradient(135deg, rgba(0,80,80,0.4), rgba(0,100,100,0.3)) !important;
    color: rgba(0,255,255,1) !important;
    border-left: 3px solid rgba(0,255,255,0.8) !important;
    box-shadow: 0 0 20px rgba(0,255,255,0.3), inset 0 0 15px rgba(0,255,255,0.1) !important;
    text-shadow: 0 0 10px rgba(0,255,255,0.5) !important;
}

/* === INSPECTOR PANEL HEADER === */
.vmo-inspector-header {
    background: linear-gradient(135deg, rgba(0,50,50,0.9), rgba(0,80,80,0.8)) !important;
    color: rgba(0,255,255,1) !important;
    text-shadow: 0 0 12px rgba(0,255,255,0.4) !important;
    border: 2px solid rgba(0,255,255,0.6) !important;
    box-shadow: 0 0 15px rgba(0,255,255,0.2) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* === ALL INSPECTOR PANEL TEXT === */
.vmo-glass-grouped-panel,
.vmo-glass-grouped-panel *,
.vmo-tool-groups,
.vmo-tool-groups * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: rgba(0,255,255,1) !important;
}

/* ==========================================
   SPEECH-TO-TEXT TRANSCRIPTION STYLES (Voice Commands Disabled)
   ========================================== */

/* === VOICE CONTROLS DISABLED === */
.vmo-voice-controls {
    display: none !important; /* Voice controls completely disabled */
    z-index: 1000 !important;
    background: linear-gradient(135deg, rgba(18, 32, 54, 0.95), rgba(0, 40, 60, 0.9)) !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 16px !important;
    padding: 8px 12px !important;
    backdrop-filter: blur(20px) saturate(150%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(1.1) !important;
    box-shadow: 
        0 8px 32px rgba(0, 255, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    animation: vmo-voice-controls-entrance 0.5s ease-out !important;
}

@keyframes vmo-voice-controls-entrance {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === VOICE STATUS DISABLED === */
.vmo-voice-status-indicator {
    display: none !important; /* Voice status completely disabled */
}

#vmo-voice-status-text {
    display: none !important; /* Voice status text disabled */
}

/* === VOICE STATUS TYPES DISABLED === */
.vmo-voice-status-indicator.vmo-status-info #vmo-voice-status-text {
    color: #00e2ff !important;
}

.vmo-voice-status-indicator.vmo-status-success #vmo-voice-status-text {
    color: #00ff88 !important;
}

.vmo-voice-status-indicator.vmo-status-warning #vmo-voice-status-text {
    color: #ffa500 !important;
}

.vmo-voice-status-indicator.vmo-status-error #vmo-voice-status-text {
    color: #ff4444 !important;
}

/* === MICROPHONE BUTTON === */
.vmo-btn-mic {
    position: relative !important;
    background: linear-gradient(135deg, rgba(18, 32, 54, 0.9), rgba(0, 40, 60, 0.8)) !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    margin-right: 0 !important;
    color: #00e2ff !important;
    backdrop-filter: blur(16px) saturate(150%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(1.1) !important;
    box-shadow: 
        0 4px 16px rgba(0, 255, 255, 0.15),
        0 1px 4px rgba(0, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vmo-btn-mic:hover {
    background: linear-gradient(135deg, rgba(0, 60, 80, 0.9), rgba(0, 80, 100, 0.8)) !important;
    border-color: rgba(0, 255, 255, 0.6) !important;
    box-shadow: 
        0 6px 24px rgba(0, 255, 255, 0.25),
        0 2px 8px rgba(0, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    color: #00f0ff !important;
    transform: translateY(-1px) scale(1.05) !important;
}

.vmo-btn-mic.vmo-mic-recording {
    background: linear-gradient(135deg, rgba(60, 20, 80, 0.9), rgba(80, 30, 100, 0.8)) !important;
    border-color: rgba(255, 100, 200, 0.6) !important;
    color: #ff6bcf !important;
    animation: vmo-mic-recording-pulse 1.5s ease-in-out infinite !important;
}

.vmo-btn-mic.vmo-mic-processing {
    background: linear-gradient(135deg, rgba(60, 60, 20, 0.9), rgba(80, 80, 30, 0.8)) !important;
    border-color: rgba(255, 255, 100, 0.6) !important;
    color: #ffeb3b !important;
    animation: vmo-mic-processing-spin 2s linear infinite !important;
}

.vmo-btn-mic.vmo-mic-error {
    background: linear-gradient(135deg, rgba(80, 20, 20, 0.9), rgba(100, 30, 30, 0.8)) !important;
    border-color: rgba(255, 100, 100, 0.6) !important;
    color: #ff6b6b !important;
    animation: vmo-mic-error-shake 0.5s ease-in-out !important;
}

/* === ENHANCED CONVERSATION MODES === */
.vmo-btn-mic.conversation {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(56, 142, 60, 0.8)) !important;
    border-color: rgba(129, 199, 132, 0.8) !important;
    color: #e8f5e8 !important;
    animation: vmo-mic-conversation-glow 2s ease-in-out infinite !important;
}

.vmo-btn-mic.listening {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(25, 118, 210, 0.8)) !important;
    border-color: rgba(100, 181, 246, 0.8) !important;
    color: #e3f2fd !important;
    animation: vmo-mic-listening-pulse 1.5s ease-in-out infinite !important;
}

.vmo-btn-mic.transcribing {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(123, 31, 162, 0.8)) !important;
    border-color: rgba(186, 104, 200, 0.8) !important;
    color: #f3e5f5 !important;
    animation: vmo-mic-transcribing-wave 1.8s ease-in-out infinite !important;
}

@keyframes vmo-mic-conversation-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(76, 175, 80, 0.6), 0 0 30px rgba(76, 175, 80, 0.3) !important; }
    50% { box-shadow: 0 0 25px rgba(76, 175, 80, 0.8), 0 0 40px rgba(76, 175, 80, 0.5) !important; }
}

@keyframes vmo-mic-listening-pulse {
    0%, 100% { 
        transform: scale(1) !important; 
        box-shadow: 0 0 10px rgba(33, 150, 243, 0.5) !important; 
    }
    50% { 
        transform: scale(1.05) !important; 
        box-shadow: 0 0 20px rgba(33, 150, 243, 0.8), 0 0 35px rgba(33, 150, 243, 0.4) !important; 
    }
}

@keyframes vmo-mic-transcribing-wave {
    0%, 100% { opacity: 1 !important; }
    25% { opacity: 0.7 !important; }
    50% { opacity: 0.9 !important; }
    75% { opacity: 0.6 !important; }
}

/* Microphone Icon */
.vmo-mic-icon {
    fill: currentColor !important;
    filter: drop-shadow(0 0 4px currentColor) !important;
    transition: all 0.3s ease !important;
    width: 16px !important;
    height: 16px !important;
}

/* Microphone Pulse Effect */
.vmo-mic-pulse {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, transparent 70%) !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
}

.vmo-mic-pulse.vmo-pulse-active {
    animation: vmo-mic-pulse-animation 2s ease-in-out infinite !important;
}

.vmo-mic-pulse.pulse-listening {
    background: radial-gradient(circle, rgba(33, 150, 243, 0.4) 0%, transparent 70%) !important;
    animation: vmo-pulse-listening 1.5s ease-in-out infinite !important;
}

.vmo-mic-pulse.pulse-speaking {
    background: radial-gradient(circle, rgba(76, 175, 80, 0.4) 0%, transparent 70%) !important;
    animation: vmo-pulse-speaking 2s ease-in-out infinite !important;
}

@keyframes vmo-pulse-listening {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0.8) !important; 
        opacity: 0.6 !important; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2) !important; 
        opacity: 0.3 !important; 
    }
}

@keyframes vmo-pulse-speaking {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1) !important; 
        opacity: 0.5 !important; 
    }
    33% { 
        transform: translate(-50%, -50%) scale(1.3) !important; 
        opacity: 0.2 !important; 
    }
    66% { 
        transform: translate(-50%, -50%) scale(0.9) !important; 
        opacity: 0.7 !important; 
    }
}

/* === VOICE SETTINGS BUTTON === */
.vmo-btn-voice-settings {
    background: linear-gradient(135deg, rgba(18, 32, 54, 0.8), rgba(0, 40, 60, 0.7)) !important;
    border: 1.5px solid rgba(0, 255, 255, 0.25) !important;
    border-radius: 10px !important;
    padding: 6px 8px !important;
    color: rgba(0, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease !important;
    font-size: 12px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vmo-btn-voice-settings:hover {
    background: linear-gradient(135deg, rgba(0, 50, 70, 0.9), rgba(0, 70, 90, 0.8)) !important;
    border-color: rgba(0, 255, 255, 0.5) !important;
    color: #00e2ff !important;
    box-shadow: 0 4px 16px rgba(0, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

.vmo-btn-voice-settings svg {
    fill: currentColor !important;
    width: 14px !important;
    height: 14px !important;
}

/* === VOICE SETTINGS MODAL === */
.vmo-voice-modal-content {
    background: linear-gradient(135deg, rgba(18, 32, 54, 0.95), rgba(0, 40, 60, 0.9)) !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(24px) saturate(150%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(1.1) !important;
    box-shadow: 
        0 16px 48px rgba(0, 255, 255, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: #eaffff !important;
    max-width: 500px !important;
    width: 90% !important;
    padding: 24px !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10001 !important;
}

.vmo-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
}

.vmo-voice-modal-content h2 {
    color: #00e2ff !important;
    text-shadow: 0 0 12px rgba(0, 226, 255, 0.4) !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Voice Setting Groups */
.vmo-voice-setting-group {
    margin-bottom: 20px !important;
    padding: 16px !important;
    background: rgba(0, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
}

.vmo-voice-setting {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    cursor: pointer !important;
}

.vmo-voice-setting input[type="checkbox"] {
    margin-right: 8px !important;
    accent-color: #00e2ff !important;
    transform: scale(1.2) !important;
}

.vmo-voice-setting span {
    color: #00e2ff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.vmo-voice-setting small {
    color: rgba(234, 255, 255, 0.7) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* Voice Select Dropdown */
#vmo-voice-select {
    width: 100% !important;
    padding: 10px 12px !important;
    background: linear-gradient(135deg, rgba(0, 40, 60, 0.8), rgba(0, 60, 80, 0.7)) !important;
    border: 1.5px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    color: #eaffff !important;
    font-size: 14px !important;
    backdrop-filter: blur(8px) !important;
}

#vmo-voice-select option {
    background: rgba(18, 32, 54, 0.95) !important;
    color: #eaffff !important;
    padding: 8px !important;
}

/* Test Voice Button */
#vmo-test-voice {
    background: linear-gradient(135deg, rgba(0, 60, 40, 0.8), rgba(0, 80, 60, 0.7)) !important;
    border: 1.5px solid rgba(0, 255, 200, 0.4) !important;
    color: #00ff9f !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

#vmo-test-voice:hover {
    background: linear-gradient(135deg, rgba(0, 80, 60, 0.9), rgba(0, 100, 80, 0.8)) !important;
    border-color: rgba(0, 255, 200, 0.6) !important;
    box-shadow: 0 4px 16px rgba(0, 255, 200, 0.2) !important;
}

/* === SPEAK BUTTONS IN CHAT === */
.vmo-speak-btn {
    background: linear-gradient(135deg, rgba(0, 40, 80, 0.7), rgba(0, 60, 100, 0.6)) !important;
    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    color: #00c8ff !important;
    font-size: 12px !important;
    margin-left: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(8px) !important;
}

.vmo-speak-btn:hover {
    background: linear-gradient(135deg, rgba(0, 60, 100, 0.8), rgba(0, 80, 120, 0.7)) !important;
    border-color: rgba(0, 200, 255, 0.5) !important;
    color: #00e2ff !important;
    box-shadow: 0 2px 8px rgba(0, 200, 255, 0.2) !important;
}

/* Speaking State Indicator */
.vmo-speaking {
    animation: vmo-speaking-glow 2s ease-in-out infinite alternate !important;
}

/* === VOICE INPUT CONTAINER UPDATES === */
.vmo-chat-input-container {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    position: relative !important;
}

.vmo-chat-input {
    flex: 1 !important;
    resize: vertical !important;
}

/* === ANIMATIONS === */
@keyframes vmo-mic-recording-pulse {
    0% { 
        box-shadow: 
            0 4px 16px rgba(255, 100, 200, 0.3),
            0 0 20px rgba(255, 100, 200, 0.2),
            inset 0 0 20px rgba(255, 100, 200, 0.1);
    }
    50% { 
        box-shadow: 
            0 6px 24px rgba(255, 100, 200, 0.5),
            0 0 30px rgba(255, 100, 200, 0.3),
            inset 0 0 30px rgba(255, 100, 200, 0.15);
    }
    100% { 
        box-shadow: 
            0 4px 16px rgba(255, 100, 200, 0.3),
            0 0 20px rgba(255, 100, 200, 0.2),
            inset 0 0 20px rgba(255, 100, 200, 0.1);
    }
}

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

@keyframes vmo-mic-error-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@keyframes vmo-mic-pulse-animation {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

@keyframes vmo-speaking-glow {
    from {
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.1);
    }
    to {
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.5),
            inset 0 0 30px rgba(0, 255, 255, 0.2);
    }
}

/* === RESPONSIVE VOICE CONTROLS === */
@media (max-width: 768px) {
    .vmo-voice-controls {
        bottom: 15px !important;
        left: 15px !important;
        padding: 6px 10px !important;
    }
    
    .vmo-btn-mic {
        padding: 6px 8px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .vmo-btn-voice-settings {
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px 6px !important;
    }
    
    .vmo-voice-status-indicator {
        font-size: 10px !important;
    }
    
    .vmo-voice-modal-content {
        width: 95% !important;
        padding: 20px !important;
    }
    
    .vmo-voice-setting-group {
        padding: 12px !important;
    }
}

/* ==========================================
   BUSINESS WIZARD STYLING - UNIFIED VERSION
   ========================================== */

/* Business Wizard Button - Integrated into VMO Header */
.vmo-btn-business-wizard {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  border: 1px solid rgba(255, 107, 107, 0.3);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
}

.vmo-btn-business-wizard:hover {
  background: linear-gradient(135deg, #ff5252 0%, #d63031 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
  border-color: rgba(255, 107, 107, 0.5);
}

.vmo-btn-business-wizard:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

/* Business Dashboard Button - Premium Business Management */
.vmo-btn-business-dashboard {
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  color: white;
  border: 1px solid rgba(76, 175, 80, 0.3);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
}

.vmo-btn-business-dashboard:hover {
  background: linear-gradient(135deg, #43A047 0%, #1B5E20 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
  border-color: rgba(76, 175, 80, 0.5);
}

.vmo-btn-business-dashboard:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

/* Business Wizard Fullscreen Modal - FORCED VISIBLE TEST 
   Z-INDEX STRUCTURE:
   - Modal Backdrop: 999999 (lowest)
   - Modal Container/Content: 1000000 (middle)  
   - Interactive Elements: 1000001 (highest)
*/
.vmo-business-wizard-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, rgba(0, 12, 24, 0.95), rgba(0, 22, 34, 0.98));
  z-index: 999999; /* Modal backdrop - lowest in modal stack */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* REMOVED problematic blur effects - clean modal display */

/* Modal content is fully visible */
.vmo-business-wizard-fullscreen,
.vmo-business-wizard-fullscreen *,
.vmo-wizard-container,
.vmo-wizard-container * {
  filter: none !important;
  opacity: 1 !important;
}

body.vmo-wizard-active {
  overflow: hidden;
}

.vmo-wizard-container {
  width: 90%; /* Reduce width to add margins */
  height: 90%; /* Reduce height to add margins */
  max-width: 1200px; /* Reduced max-width for better fit */
  max-height: calc(90vh); /* Ensure it doesn't exceed viewport */
  background: linear-gradient(135deg, rgba(13, 18, 30, 0.98), rgba(0, 22, 34, 0.95));
  border: 2px solid rgba(0, 228, 255, 0.3);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 20px 60px rgba(0, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px; /* Rounded corners for professional look */
  position: relative; /* Ensure proper positioning context */
  z-index: 1000000; /* Higher than modal backdrop (999999) */
}

/* Wizard Header - Background fills with lime green as progress bar */
.vmo-wizard-header {
  background: linear-gradient(135deg, rgba(0, 42, 58, 0.95), rgba(0, 22, 34, 0.98));
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 2px solid rgba(0, 228, 255, 0.3);
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 228, 255, 0.15);
  position: relative;
  overflow: hidden;
}

/* Progress bar fill - lime green that grows from left to right behind content */
.vmo-wizard-header-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, rgba(168, 224, 99, 0.25), rgba(86, 171, 47, 0.35)); /* Subtle lime green overlay */
  transition: width 0.6s ease-in-out;
  z-index: 1;
}

/* Header content overlay - sits on top of progress bar */
.vmo-wizard-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center; /* Center the content */
  align-items: center;
  width: 100%;
}

.vmo-wizard-progress {
  display: flex !important;
  flex-direction: column;
  align-items: center; /* CENTER the text */
  gap: 0;
  position: absolute; /* Position absolutely to center it */
  left: 50%;
  transform: translateX(-50%); /* Perfect centering */
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2;
}

.vmo-progress-text {
  color: rgba(255, 255, 255, 0.98);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  display: block !important;
  visibility: visible !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.3px;
  text-align: center; /* CENTER the text */
}

.vmo-wizard-close {
  background: none;
  border: 2px solid rgba(255, 0, 0, 0.6);
  color: #ff4444;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  position: absolute; /* Position absolutely */
  right: 20px; /* Pin to right side */
  z-index: 3; /* Above everything */
}

.vmo-wizard-close:hover {
  background: rgba(255, 0, 0, 0.15);
  border-color: rgba(255, 0, 0, 0.8);
  color: #ff0000;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

/* Wizard Content */
.vmo-wizard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 140px); /* Account for header height and modal margins */
  min-height: 0; /* Allow flex shrinking */
  position: relative; /* Ensure proper positioning context */
  z-index: 1000000; /* Same as container */
}

.vmo-wizard-conversation {
  flex: 1;
  padding: 15px 30px 15px 30px; /* Reduced padding to maximize chat space */
  overflow-y: auto;
  background: rgba(0, 22, 34, 0.3);
  min-height: 0; /* Allow flexible sizing */
  max-height: 100%; /* Ensure it doesn't exceed parent */
}

/* Compact intro styling for better fit without scrolling */
.vmo-wizard-intro h3 {
  font-size: 28px !important;
  margin-bottom: 16px !important;
}

.vmo-wizard-intro p {
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin-bottom: 20px !important;
}

.vmo-wizard-services-list {
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

.vmo-ai-message, .vmo-user-message {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: vmo-message-slide-in 0.4s ease;
}

/* Special styling for intro message without avatar */
.vmo-ai-message.vmo-wizard-intro {
  justify-content: center;
  gap: 0;
  max-height: 350px;
  overflow-y: auto;
  padding: 15px;
  margin-bottom: 15px;
}

.vmo-ai-message.vmo-wizard-intro .vmo-ai-avatar {
  display: none;
}

/* ✅ FIXED: Professional message styling - LEFT-aligned like VS Code chat */
.vmo-ai-message .vmo-message-content {
  max-width: 85% !important;
  text-align: left !important;  /* ✅ LEFT-ALIGNED, not centered! */
  margin: 0;  /* Not centered */
  padding: 20px;
  font-size: 15px;
  line-height: 1.7;  /* Better readability */
}

@keyframes vmo-message-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vmo-ai-message {
  flex-direction: row;
}

.vmo-user-message {
  flex-direction: row-reverse;
}

.vmo-ai-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px;
}

.vmo-ai-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.vmo-message-content {
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 12px;
  padding: 16px;
  max-width: 85%;
  line-height: 1.6;
  color: #eaffff;
  font-size: 18px !important; /* Larger chat font */
  font-weight: 600 !important; /* Bolder text */
}

.vmo-user-message-content {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 16px;
  max-width: 85%;
  line-height: 1.6;
  color: #eaffff;
  font-size: 18px !important; /* Larger chat font */
  font-weight: 600 !important; /* Bolder text */
}

.vmo-message-content h3 {
  color: #55ffff;
  margin: 0 0 12px 0;
  font-size: 1.3rem;
}

.vmo-message-content ul {
  margin: 12px 0;
  padding-left: 20px;
}

.vmo-message-content li {
  margin-bottom: 8px;
  color: rgba(234, 255, 255, 0.9);
  font-size: 16px; /* Minimum 16px font size for list items */
}

/* Ensure all text in wizard messages is at least 16px */
.vmo-wizard-conversation p,
.vmo-wizard-conversation span,
.vmo-wizard-conversation div,
.vmo-message-content p,
.vmo-message-content span,
.vmo-message-content div {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Override any smaller text specifically in wizard messages */
.vmo-business-wizard-fullscreen * {
  font-size: inherit;
}

.vmo-business-wizard-fullscreen .vmo-message-content,
.vmo-business-wizard-fullscreen .vmo-user-message-content {
  font-size: 16px !important;
}

/* NEW: Enhanced Wizard Intro Styling */
.vmo-wizard-intro-large {
  text-align: center;
  max-width: 100% !important;
  background: rgba(0, 255, 154, 0.08) !important;
  border: 1px solid rgba(0, 255, 154, 0.15) !important;
}

.vmo-wizard-main-text {
  font-size: 2rem !important;
  line-height: 1.4;
}

.vmo-wizard-main-text p {
  font-size: 2rem !important;
  margin: 20px 0;
  color: #eaffff;
}

.vmo-wizard-services-list {
  list-style: decimal;
  text-align: left;
  display: inline-block;
  margin: 30px 0;
  padding-left: 40px;
  font-size: 2rem !important;
}

.vmo-wizard-services-list li {
  margin-bottom: 15px;
  color: rgba(230, 255, 241, 0.9);
  font-size: 2rem !important;
}

.vmo-wizard-start-button-container {
  margin-top: 40px;
  text-align: center;
}

.vmo-wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vmo-wizard-spacer {
  flex: 1;
}

/* Wizard Input Area - POSITIONED AT BOTTOM in vacant space */
.vmo-wizard-input-area {
  background: rgba(0, 22, 34, 0.5);
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  padding: 20px 30px;
  flex-shrink: 0;
  position: relative;
  z-index: 1000000;
}

.vmo-wizard-input-container {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 0;
  position: relative;
}

.vmo-wizard-input-container textarea {
  flex: 1;
  background: rgba(0, 35, 55, 0.7);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  padding-right: 280px; /* Make room for controls on the right */
  color: #eaffff;
  font-size: 18px !important;
  font-weight: 500;
  resize: vertical;
  min-height: 60px;
  max-height: 150px;
  font-family: inherit;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.vmo-wizard-input-container textarea:focus {
  outline: none;
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

/* Wizard Button Visibility Controls - FIXED FOR VISIBILITY */
#vmo-wizard-start {
  display: block !important; /* FORCE VISIBLE */
  visibility: visible !important;
  opacity: 1 !important;
}

#vmo-wizard-send {
  display: block !important; /* FORCE VISIBLE */
  visibility: visible !important;
  opacity: 1 !important;
}

#vmo-wizard-previous {
  display: none;
}

#vmo-wizard-skip {
  display: block;
}

#vmo-wizard-voice {
  display: block !important; /* FORCE VISIBLE */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Wizard Controls Layout */
.vmo-wizard-controls {
  display: flex;
  gap: 8px;
}

.vmo-wizard-btn {
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.2;
}

.vmo-wizard-btn-primary {
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
  color: white;
}

.vmo-wizard-btn-primary:hover {
  background: linear-gradient(135deg, #45b7aa, #3e8f7d);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(78, 205, 196, 0.3);
}

.vmo-wizard-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #eaffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.vmo-wizard-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.vmo-wizard-btn-outline {
  background: transparent;
  color: rgba(234, 255, 255, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.vmo-wizard-btn-outline:hover {
  background: rgba(0, 255, 255, 0.1);
  border-color: rgba(0, 255, 255, 0.5);
}

.vmo-wizard-btn-start {
  background: transparent !important;
  color: #00e4ff !important;
  border: 2px solid #00e4ff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 16px 32px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1000001 !important;
  min-width: 300px !important;
  max-width: 90% !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.3 !important;
  word-wrap: break-word !important;
}

.vmo-wizard-btn-start:hover {
  background: rgba(0, 228, 255, 0.1) !important; /* Light cyan background on hover */
  color: #ffffff !important;
  border-color: #00e4ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 228, 255, 0.3) !important;
}

.vmo-wizard-btn-success {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  font-size: 1.1rem;
  padding: 16px 32px;
}

.vmo-wizard-btn-success:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.vmo-wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vmo-wizard-suggestions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.vmo-wizard-suggestion {
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.2);
  color: #00e2ff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
  text-align: center;
  line-height: 1.4;
}

.vmo-wizard-suggestion:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: rgba(0, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* Generation Phase Styles */
.vmo-wizard-generation {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

.vmo-generation-header {
  text-align: center;
  margin-bottom: 40px;
}

.vmo-generation-header h3 {
  color: #55ffff;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.vmo-generation-header p {
  color: rgba(234, 255, 255, 0.8);
  font-size: 1.1rem;
}

.vmo-generation-agents {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.vmo-agent-status {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}

.vmo-agent-status.completed {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.3);
}

.vmo-agent-icon {
  font-size: 2rem;
  width: 60px;
  text-align: center;
}

.vmo-agent-info {
  flex: 1;
}

.vmo-agent-info h4 {
  color: #55ffff;
  margin: 0 0 5px 0;
  font-size: 1.1rem;
}

.vmo-agent-progress {
  color: rgba(234, 255, 255, 0.8);
  margin: 0;
  font-size: 0.95rem;
}

.vmo-agent-indicator {
  font-size: 1.5rem;
}

.vmo-agent-status.completed .vmo-agent-indicator {
  color: #4CAF50;
}

/* Progress bars */
.vmo-generation-progress {
  margin-top: 30px;
}

.vmo-progress-bar-large {
  width: 100%;
  height: 12px;
  background: rgba(0, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
}

.vmo-progress-fill-large {
  height: 100%;
  background: linear-gradient(90deg, #00e2ff, #667eea, #4CAF50);
  border-radius: 6px;
  transition: width 0.5s ease;
  width: 0%;
}

.vmo-generation-status {
  text-align: center;
  color: #55ffff;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Results Phase */
.vmo-wizard-results {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

.vmo-results-header {
  text-align: center;
  margin-bottom: 30px;
}

.vmo-results-header h3 {
  color: #4CAF50;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.vmo-results-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.vmo-result-item {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.vmo-result-icon {
  font-size: 2.5rem;
  text-align: center;
}

.vmo-result-info h4 {
  color: #55ffff;
  margin: 0 0 8px 0;
  text-align: center;
}

.vmo-result-info p {
  color: rgba(234, 255, 255, 0.8);
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
}

.vmo-result-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.vmo-wizard-btn-view {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-size: 0.85rem;
  padding: 8px 16px;
}

.vmo-wizard-btn-edit {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
  font-size: 0.85rem;
  padding: 8px 16px;
}

.vmo-wizard-btn-download {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.3);
  font-size: 0.85rem;
  padding: 8px 16px;
}

.vmo-wizard-btn-publish {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  font-size: 1.2rem;
  padding: 16px 40px;
}

.vmo-results-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Responsive Design for Business Wizard */
@media (max-width: 1024px) {
  .vmo-wizard-container {
    max-width: 100%;
    border-radius: 0;
  }
  
  .vmo-wizard-header {
    padding: 15px 20px;
  }
  
  .vmo-wizard-title h2 {
    font-size: 1.5rem;
  }
  
  .vmo-wizard-content,
  .vmo-wizard-input-area {
    padding: 15px 20px;
  }
}

@media (max-width: 768px) {
  .vmo-wizard-container {
    width: 95%; /* Slightly smaller on mobile */
    height: 95%; /* Slightly smaller on mobile */
    max-height: calc(95vh); /* Account for mobile spacing */
  }
  
  .vmo-wizard-content {
    max-height: calc(100vh - 120px); /* Adjust for mobile header */
  }
  
  .vmo-wizard-branding {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .vmo-wizard-progress {
    min-width: 150px;
  }
  
  .vmo-progress-bar {
    width: 150px;
  }
  
  .vmo-message-content,
  .vmo-user-message-content {
    max-width: 95%;
  }
  
  .vmo-wizard-input-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .vmo-wizard-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .vmo-wizard-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .vmo-generation-agents {
    grid-template-columns: 1fr;
  }
  
  .vmo-results-summary {
    grid-template-columns: 1fr;
  }
  
  .vmo-results-actions {
    flex-direction: column;
  }
}

/* === Comprehensive Business Wizard Styles === */

/* Agent Processing Container */
.vmo-agent-processing-container {
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.1), rgba(26, 95, 63, 0.1));
  border: 2px solid rgba(45, 134, 89, 0.3);
  border-radius: 16px;
  padding: 24px;
  margin: 20px 0;
}

.vmo-processing-header h3 {
  color: #2d8659;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vmo-processing-header p {
  color: #666;
  margin-bottom: 20px;
}

.vmo-current-agent {
  margin-bottom: 16px;
}

.vmo-agent-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(45, 134, 89, 0.1);
  border-radius: 12px;
  border-left: 4px solid #2d8659;
}

.vmo-agent-icon {
  color: #2d8659;
  font-size: 18px;
}

.vmo-agent-status span {
  font-weight: 600;
  color: #2d8659;
}

.vmo-processing-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.vmo-processing-progress .vmo-progress-bar {
  flex: 1;
  height: 12px;
  background: rgba(45, 134, 89, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

.vmo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d8659, #34a65f);
  border-radius: 6px;
  transition: width 0.5s ease;
}

.vmo-processing-progress span {
  font-weight: 600;
  color: #2d8659;
  min-width: 40px;
}

.vmo-agent-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.vmo-agent-item {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(45, 134, 89, 0.2);
  border-radius: 10px;
  font-weight: 500;
  color: #777;
  transition: all 0.3s ease;
  text-align: center;
}

.vmo-agent-item.active {
  background: rgba(45, 134, 89, 0.2);
  border-color: #2d8659;
  color: #2d8659;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(45, 134, 89, 0.3);
}

/* Comprehensive Business Results */
.vmo-comprehensive-business-results {
  max-width: 1200px;
  margin: 0 auto;
}

.vmo-results-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.1), rgba(26, 95, 63, 0.1));
  border-radius: 16px;
  border: 2px solid rgba(45, 134, 89, 0.3);
}

.vmo-results-header h2 {
  color: #2d8659;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.vmo-results-header p {
  color: #666;
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.vmo-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.vmo-result-card {
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid rgba(45, 134, 89, 0.2);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
}

.vmo-result-card:hover {
  border-color: rgba(45, 134, 89, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45, 134, 89, 0.2);
}

.vmo-result-card.vmo-primary-result {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.1), rgba(26, 95, 63, 0.05));
  border-color: rgba(45, 134, 89, 0.4);
}

.vmo-result-card h3 {
  color: #2d8659;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vmo-result-card p {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.5;
}

.vmo-website-preview {
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vmo-website-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.vmo-feature-tag {
  background: rgba(45, 134, 89, 0.2);
  color: #2d8659;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(45, 134, 89, 0.3);
}

.vmo-result-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.vmo-analysis-summary,
.vmo-document-list,
.vmo-marketing-highlights,
.vmo-plan-features,
.vmo-operations-list {
  margin: 16px 0;
}

.vmo-analysis-item,
.vmo-document-item,
.vmo-highlight-item,
.vmo-ops-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(45, 134, 89, 0.05);
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 3px solid #2d8659;
}

.vmo-analysis-item i,
.vmo-document-item i,
.vmo-highlight-item i,
.vmo-ops-item i {
  color: #2d8659;
  width: 20px;
  text-align: center;
}

.vmo-document-item {
  justify-content: space-between;
}

.vmo-plan-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vmo-plan-tag {
  background: rgba(45, 134, 89, 0.1);
  color: #2d8659;
  padding: 6px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(45, 134, 89, 0.2);
}

.vmo-results-summary {
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.1), rgba(26, 95, 63, 0.05));
  border: 2px solid rgba(45, 134, 89, 0.3);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
}

.vmo-results-summary h3 {
  color: #2d8659;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}

.vmo-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.vmo-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border-left: 3px solid #2d8659;
}

.vmo-summary-item i {
  color: #2d8659;
  font-size: 16px;
}

.vmo-results-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.vmo-btn-large {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
}

.vmo-btn-outline {
  background: transparent;
  border: 2px solid rgba(45, 134, 89, 0.4);
  color: #2d8659;
}

.vmo-btn-outline:hover {
  background: rgba(45, 134, 89, 0.1);
}

/* Business Summary Styles */
.vmo-business-summary {
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid rgba(45, 134, 89, 0.2);
  border-radius: 16px;
  padding: 24px;
  margin: 20px 0;
}

.vmo-summary-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(45, 134, 89, 0.2);
}

.vmo-summary-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.vmo-summary-section h3 {
  color: #2d8659;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vmo-summary-section p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.vmo-summary-section strong {
  color: #2d8659;
  font-weight: 600;
}

/* Modal Styles for Business Analysis */
.vmo-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
}

.vmo-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 900px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.vmo-modal-header {
  background: linear-gradient(135deg, #2d8659, #1a5f3f);
  color: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vmo-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.vmo-modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.vmo-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.vmo-modal-content {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(80vh - 80px);
}

.vmo-analysis-tabs,
.vmo-marketing-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.vmo-tab-btn {
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  color: #666;
  transition: all 0.2s;
}

.vmo-tab-btn.active {
  color: #2d8659;
  border-bottom-color: #2d8659;
}

.vmo-tab-btn:hover {
  color: #2d8659;
  background: rgba(45, 134, 89, 0.05);
}

.vmo-tab-content {
  display: none;
  line-height: 1.6;
  color: #444;
}

.vmo-tab-content.active {
  display: block;
}

.vmo-operations-content h4 {
  color: #2d8659;
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0 8px 0;
}

.vmo-operations-actions {
  margin-top: 24px;
  text-align: center;
}

/* Small Button Styles */
.vmo-btn-sm {
  background: rgba(45, 134, 89, 0.1);
  border: 1px solid rgba(45, 134, 89, 0.3);
  color: #2d8659;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.vmo-btn-sm:hover {
  background: rgba(45, 134, 89, 0.2);
  transform: translateY(-1px);
}

/* Responsive adjustments for comprehensive business wizard */
@media (max-width: 768px) {
  .vmo-results-grid {
    grid-template-columns: 1fr;
  }
  
  .vmo-result-card.vmo-primary-result {
    grid-column: 1;
  }
  
  .vmo-website-features,
  .vmo-plan-features {
    justify-content: center;
  }
  
  .vmo-results-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .vmo-btn-large {
    width: 100%;
    max-width: 300px;
  }
  
  .vmo-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .vmo-agent-list {
    grid-template-columns: 1fr;
  }
  
  .vmo-modal {
    width: 95%;
    margin: 20px;
  }
  
  .vmo-analysis-tabs,
  .vmo-marketing-tabs {
    flex-wrap: wrap;
  }
}

/* === WordPress Media Library Z-Index Fix === */
/* Ensure WordPress media library appears above VMO consultation modal */
.media-modal {
    z-index: 999999 !important;
}

.media-modal-backdrop {
    z-index: 999998 !important;
}

/* Ensure VMO business consultation modal doesn't interfere */
#vmo-business-wizard-modal {
    z-index: 100000;
}

#vmo-business-wizard-modal .modal-overlay {
    z-index: 99999;
}

/* ============== CONTACT MANAGEMENT STYLES ============== */

/* Contact Detail Modal */
#vmo-contact-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

#vmo-contact-detail-modal.show {
    display: flex !important;
}

#vmo-contact-detail-modal .vmo-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.vmo-contact-detail-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    margin: auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vmo-contact-detail-content .vmo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.vmo-contact-detail-content .vmo-modal-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

.vmo-modal-controls {
    display: flex;
    gap: 15px;
}

.vmo-modal-controls button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmo-modal-controls button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.vmo-contact-detail-content .vmo-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Contact Detail Tabs */
.vmo-contact-detail-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 0 40px;
}

.vmo-tab-btn {
    background: none;
    border: none;
    padding: 20px 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.vmo-tab-btn.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: white;
}

.vmo-tab-btn:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

/* Tab Content */
.vmo-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
}

.vmo-tab-panel {
    display: none;
}

.vmo-tab-panel.active {
    display: block;
}

/* Overview Tab Styles */
.vmo-contact-overview {
    max-width: 1000px;
}

.vmo-contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.vmo-info-section {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #e9ecef;
}

.vmo-info-section h3 {
    margin: 0 0 25px 0;
    color: #2c3e50;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid #667eea;
    padding-bottom: 10px;
}

.vmo-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.vmo-info-item:last-child {
    border-bottom: none;
}

.vmo-info-item label {
    font-weight: 600;
    color: #495057;
    min-width: 120px;
}

.vmo-info-item span {
    color: #2c3e50;
    text-align: right;
    flex: 1;
}

/* Priority Badges */
.vmo-priority-badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.priority-high {
  background: #7c5cff !important;
  color: white !important;
}

.priority-medium {
    background: #ffc107 !important;
    color: #212529 !important;
}

.priority-low {
    background: #28a745 !important;
    color: white !important;
}

/* Contact Stats Cards */
.vmo-contact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.vmo-stat-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.vmo-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.vmo-stat-card h4 {
    margin: 0 0 15px 0;
    color: #6c757d;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.vmo-stat-card span {
    font-size: 32px !important;
    font-weight: bold !important;
    color: #667eea !important;
    display: block !important;
}

/* Interactions Tab Styles */
.vmo-interactions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.vmo-interactions-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
}

.vmo-add-interaction-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.vmo-add-interaction-btn:hover {
    background: #5a67d8;
    transform: translateY(-2px);
}

.vmo-interactions-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vmo-interaction-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
}

.vmo-interaction-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.vmo-interaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.vmo-interaction-type {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #667eea;
}

.vmo-interaction-type i {
    width: 20px;
    text-align: center;
}

.vmo-interaction-date {
    color: #6c757d;
    font-size: 14px;
}

.vmo-interaction-content h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 18px;
}

.vmo-interaction-content p {
    margin: 0 0 15px 0;
    color: #495057;
    line-height: 1.6;
}

.vmo-interaction-outcome,
.vmo-interaction-next-action {
    margin: 10px 0;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.vmo-interaction-meta {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
    font-size: 14px;
    color: #6c757d;
}

/* Contact List Styles */
.vmo-contact-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vmo-contact-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    border-color: #667eea;
}

.vmo-contact-info {
    flex: 1;
}

.vmo-contact-name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.vmo-contact-email {
    color: #667eea;
    margin-bottom: 3px;
}

.vmo-contact-company {
    color: #6c757d;
    font-size: 14px;
}

.vmo-contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.vmo-contact-category {
    background: #f8f9fa;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    color: #495057;
}

.vmo-contact-priority {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.vmo-contact-stats {
    text-align: right;
}

.vmo-last-contact {
    color: #6c757d;
    font-size: 12px;
}

/* AI Insights Styles */
.vmo-insights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.vmo-insights-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
}

.vmo-refresh-insights-btn {
    background: #17a2b8;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.vmo-refresh-insights-btn:hover {
    background: #138496;
    transform: translateY(-2px);
}

.vmo-insights-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.vmo-insight-section {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 25px;
}

.vmo-insight-section h4 {
    margin: 0 0 15px 0;
    color: #667eea;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 10px;
}

.vmo-recommendations {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vmo-recommendations li {
    padding: 12px 0;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    padding-left: 25px;
}

.vmo-recommendations li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

.vmo-recommendations li:last-child {
    border-bottom: none;
}

/* Loading States */
.vmo-loading {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-style: italic;
}

.vmo-no-data,
.vmo-no-contacts {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px dashed #dee2e6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vmo-contact-detail-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .vmo-contact-detail-content .vmo-modal-header,
    .vmo-tab-content {
        padding: 20px;
    }
    
    .vmo-contact-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .vmo-contact-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vmo-contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .vmo-contact-meta {
        flex-direction: row;
        align-self: stretch;
        justify-content: space-between;
    }
}

/* === Business Voice Consultation Interface === */
.vmo-business-chat-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    height: 80vh;
    background: rgba(18, 32, 54, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 255, 255, 0.2);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vmo-business-chat-header {
    background: linear-gradient(135deg, #00e2ff 0%, #1a4a5c 100%);
    padding: 20px;
    text-align: center;
    border-radius: 18px 18px 0 0;
}

.vmo-business-chat-header h3 {
    margin: 0 0 8px 0;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.vmo-business-chat-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.voice-status {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(0, 255, 0, 0.2);
    border-radius: 15px;
    font-size: 12px;
    color: #4fff4f;
    display: inline-block;
}

.vmo-business-chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vmo-business-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 85%;
}

.vmo-business-message-ai {
    align-self: flex-start;
}

.vmo-business-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(0, 255, 255, 0.2);
    border: 1px solid rgba(0, 255, 255, 0.3);
    flex-shrink: 0;
}

.vmo-business-message-user .message-avatar {
    background: rgba(255, 100, 0, 0.2);
    border-color: rgba(255, 100, 0, 0.3);
}

.message-content {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 12px 16px;
    backdrop-filter: blur(10px);
}

.vmo-business-message-user .message-content {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.3);
}

.message-text {
    color: #eaffff;
    line-height: 1.4;
    margin-bottom: 5px;
}

.message-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.message-speak-btn {
    background: rgba(0, 255, 255, 0.2);
    border: 1px solid rgba(0, 255, 255, 0.4);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00e2ff;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
    align-self: flex-end;
}

.message-speak-btn:hover {
    background: rgba(0, 255, 255, 0.3);
    transform: scale(1.1);
}

.vmo-business-chat-input {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

#business-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 12px 18px;
    color: white;
    font-size: 14px;
    backdrop-filter: blur(10px);
}

#business-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#business-chat-input:focus {
    outline: none;
    border-color: #00e2ff;
    box-shadow: 0 0 15px rgba(0, 226, 255, 0.3);
}

.vmo-business-chat-footer {
    padding: 15px 20px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.vmo-btn-voice {
    background: rgba(255, 100, 0, 0.2);
    border: 1px solid rgba(255, 100, 0, 0.4);
    color: #ff6400;
    border-radius: 25px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.vmo-btn-voice:hover {
    background: rgba(255, 100, 0, 0.3);
    transform: scale(1.05);
}

.vmo-btn-voice.recording {
    background: rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 0, 0, 0.5);
    color: #ff4444;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Typing indicator */
#business-typing-indicator .typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

#business-typing-indicator .typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.6);
    animation: typing 1.4s infinite ease-in-out;
}

#business-typing-indicator .typing-dots span:nth-child(1) { animation-delay: -0.32s; }
#business-typing-indicator .typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* === SIMPLE WORKING TOAST SYSTEM === */
.vmo-toast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: white !important;
    padding: 20px 25px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    z-index: 10000 !important;
    max-width: 400px !important;
    min-width: 250px !important;
    text-align: center !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.vmo-loading-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #007cba !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin: 0 auto !important;
}

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

.vmo-toast-success {
    border-left: 4px solid #28a745 !important;
}

.vmo-toast-error {
  border-left: 4px solid #7c5cff !important;
}

.vmo-toast-info {
    border-left: 4px solid #007cba !important;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* === VMO PRECISION REFINEMENT SYSTEM === */
/* Section Selection & Highlighting */
.vmo-section-badge {
    position: absolute !important;
    top: -15px !important;
    left: -15px !important;
    background: #007cba !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0,123,186,0.3) !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.vmo-section-highlight-active {
    outline: 4px solid #28a745 !important;
    outline-offset: 3px !important;
    transition: all 0.3s ease !important;
}

.vmo-section-highlight-inactive {
    outline: 2px solid #ddd !important;
    outline-offset: 1px !important;
    transition: all 0.3s ease !important;
}

/* Section Chooser Modal */
#vmo-section-chooser {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#vmo-section-chooser h3 {
    margin-top: 0 !important;
    color: #333 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#vmo-target-section {
    width: 100% !important;
    padding: 12px !important;
    border: 2px solid #007cba !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: white !important;
    transition: border-color 0.2s ease !important;
}

#vmo-target-section:focus {
    outline: none !important;
    border-color: #005a8b !important;
    box-shadow: 0 0 0 3px rgba(0,123,186,0.1) !important;
}

#vmo-confirm-chooser {
    padding: 10px 20px !important;
    background: #007cba !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
}

#vmo-confirm-chooser:hover {
    background: #005a8b !important;
}

#vmo-cancel-chooser {
    margin-right: 12px !important;
    padding: 10px 20px !important;
    border: 1px solid #ccc !important;
    background: white !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#vmo-cancel-chooser:hover {
    border-color: #999 !important;
    background: #f8f9fa !important;
}