/* ============================================================
   CMAVision Webapp Redesign — Approach B
   - 380px wide cards on mobile browsers
   - 600px wide cards on desktop (>= 768px)
   - Visual parity with the React Native mobile app
   - Scoped under body.redesign so we can disable instantly if needed
   ============================================================ */

/* ---------- DESIGN TOKENS (extending existing :root) ---------- */
body.redesign {
  --redesign-card-max: 380px;
  --redesign-card-padding: 24px;
  --redesign-h1-size: 24px;
  --redesign-h2-size: 22px;
  --redesign-input-padding: 11px 14px;
  --redesign-btn-padding: 13px;
  --redesign-body-size: 14px;
  --redesign-helper-size: 11px;
  --redesign-link-blue: #6db0ff;
  --redesign-divider: #2a2a36;
  --redesign-save-red: #dc2626;
}

@media (min-width: 768px) {
  body.redesign {
    --redesign-card-max: 600px;
    --redesign-card-padding: 36px;
    --redesign-h1-size: 32px;
    --redesign-h2-size: 26px;
    --redesign-input-padding: 13px 16px;
    --redesign-btn-padding: 15px;
    --redesign-body-size: 15px;
    --redesign-helper-size: 12px;
  }
}

/* ---------- CARD OVERRIDE (matches mobile app card style) ---------- */
body.redesign .card {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: var(--redesign-card-max);
  padding: var(--redesign-card-padding);
  margin: 30px auto;
  background-color: #1e1e1e;
  border: 1px solid #2a2a36;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

body.redesign .screen {
  align-items: flex-start;
  padding: 0 16px;
}

/* Intro screen card - keep top spacing tighter for marketing layout */
body.redesign #intro-screen .card {
  margin-top: 24px;
}

/* ---------- HEADINGS ---------- */
body.redesign h1 {
  font-size: var(--redesign-h1-size);
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #e0e0e0;
  text-align: center;
  margin: 0 0 12px;
}

body.redesign h2 {
  font-size: var(--redesign-h2-size);
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #e0e0e0;
  text-align: center;
  margin: 0 0 14px;
}

body.redesign h3 {
  font-size: 18px;
  font-weight: 500;
  color: #e0e0e0;
  text-align: center;
  margin: 18px 0 14px;
}

/* ---------- BODY TEXT ---------- */
body.redesign .intro-text {
  color: #b0b0b0;
  font-size: var(--redesign-body-size);
  line-height: 1.6;
  text-align: center;
  margin: 0 0 18px;
}

body.redesign .helper-text {
  color: #888;
  font-size: var(--redesign-helper-size);
  display: block;
  margin-bottom: 6px;
}

body.redesign .disclaimer {
  color: #666;
  font-size: 11px;
  text-align: center;
  margin-top: 18px;
}

/* ---------- INPUTS ---------- */
body.redesign .input-group {
  margin-bottom: 14px;
}

body.redesign .input-group label {
  color: #b0b0b0;
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

body.redesign input[type="text"],
body.redesign input[type="email"],
body.redesign input[type="password"] {
  background-color: #333;
  border: 1px solid #444;
  border-radius: 8px;
  padding: var(--redesign-input-padding);
  color: #e0e0e0;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.redesign input[type="text"]:focus,
body.redesign input[type="email"]:focus,
body.redesign input[type="password"]:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* ---------- BUTTONS ---------- */
body.redesign .primary-btn {
  display: block;
  width: 100%;
  max-width: none;
  margin: 18px auto 0;
  padding: var(--redesign-btn-padding);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background-color: #0d6efd;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.05s;
}

body.redesign .primary-btn:hover {
  background-color: #0b5ed7;
}

body.redesign .primary-btn:active {
  transform: scale(0.98);
}

body.redesign .dashboard-btn {
  background-color: #374151 !important;
  margin-top: 10px !important;
}

body.redesign .dashboard-btn:hover {
  background-color: #475569 !important;
}

/* ---------- FORGOT PASSWORD LINK ---------- */
body.redesign #forgot-password-link {
  color: var(--redesign-link-blue) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: block;
  text-align: center;
  margin-top: 14px;
}

body.redesign #forgot-password-link:hover {
  text-decoration: underline !important;
}

/* ---------- INTRO SCREEN: feature items ---------- */
body.redesign .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #14141e;
  border: 0.5px solid #2a2a36;
  border-radius: 8px;
}

body.redesign .feature-item .icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.2;
}

body.redesign .feature-item .feature-text {
  font-size: 13px;
  line-height: 1.55;
  color: #b0b0b0;
}

body.redesign .feature-item .feature-text strong {
  color: #e0e0e0;
  font-weight: 600;
}

/* ---------- REPLAY TUTORIAL LINK ---------- */
body.redesign .replay-tutorial-wrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--redesign-divider);
  text-align: center;
}

body.redesign .replay-tutorial-link {
  color: var(--redesign-link-blue);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
}

body.redesign .replay-tutorial-link:hover {
  color: #8cc0ff;
}

/* ---------- SPLASH SCREEN ---------- */
.cma-splash {
  position: fixed;
  inset: 0;
  background: #121212;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: cma-splash-fade-in 400ms ease;
}

.cma-splash.fade-out {
  animation: cma-splash-fade-out 400ms ease forwards;
}

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

@keyframes cma-splash-fade-out {
  from { opacity: 1; }
  to { opacity: 0; pointer-events: none; }
}

.cma-splash-brand {
  color: #e0e0e0;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 28px;
}

.cma-splash-brand .blue {
  color: #0d6efd;
}

.cma-splash-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 32px;
}

.cma-splash-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d6efd;
  animation: cma-splash-bounce 1.4s ease-in-out infinite;
}

.cma-splash-dot:nth-child(2) { animation-delay: 0.2s; }
.cma-splash-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes cma-splash-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

.cma-splash-tagline {
  color: #666;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .cma-splash-brand { font-size: 48px; }
  .cma-splash-dots { gap: 14px; margin-bottom: 40px; }
  .cma-splash-dot { width: 12px; height: 12px; }
  .cma-splash-tagline { font-size: 14px; }
}

/* ---------- TOUR MODAL ---------- */
.cma-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 1);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  padding: 16px;
  box-sizing: border-box;
}

.cma-tour-overlay.visible {
  display: flex;
  animation: cma-tour-fade-in 300ms ease;
}

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

.cma-tour-modal {
  width: 100%;
  max-width: 380px;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .cma-tour-modal { max-width: 600px; }
}

.cma-tour-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 0.5px solid #2a2a2a;
}

.cma-tour-brand {
  font-size: 14px;
  font-weight: 500;
  color: #e0e0e0;
  letter-spacing: 0.3px;
}

.cma-tour-brand .blue { color: #0d6efd; }

.cma-tour-skip {
  color: #666;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  user-select: none;
  transition: color 0.15s;
}

.cma-tour-skip:hover { color: #b0b0b0; }

.cma-tour-stage {
  padding: 18px 22px 0;
  min-height: 280px;
}

.cma-tour-caption {
  padding: 14px 22px 0;
  text-align: center;
}

.cma-tour-caption-title {
  color: #e0e0e0;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: 0.2px;
}

.cma-tour-caption-body {
  color: #b0b0b0;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 768px) {
  .cma-tour-caption-title { font-size: 18px; }
  .cma-tour-caption-body { font-size: 14px; }
}

.cma-tour-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 14px 0 8px;
}

.cma-tour-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: #2a2a36;
  cursor: pointer;
  transition: all 250ms;
}

.cma-tour-dot.active {
  background: #0d6efd;
  width: 18px;
}

.cma-tour-cta-row {
  padding: 4px 22px 20px;
}

.cma-tour-cta {
  background: #0d6efd;
  color: #fff;
  padding: 12px 0;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: none;
  width: 100%;
  transition: background-color 0.15s, transform 0.05s;
}

.cma-tour-cta:hover { background: #0b5ed7; }
.cma-tour-cta:active { transform: scale(0.99); }

/* Welcome slide (no caption shown - text is centered in stage) */
.cma-tour-welcome {
  text-align: center;
  padding: 40px 16px 20px;
}

.cma-tour-welcome-headline {
  color: #e0e0e0;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 18px;
  letter-spacing: 0.3px;
}

.cma-tour-welcome-body {
  color: #b0b0b0;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.cma-tour-welcome-brand {
  color: #6db0ff;
  font-weight: 500;
}

@media (min-width: 768px) {
  .cma-tour-welcome { padding: 60px 16px 30px; }
  .cma-tour-welcome-headline { font-size: 30px; }
  .cma-tour-welcome-body { font-size: 16px; }
}

/* ---------- TOUR MOCKUP CARDS (inside slide stage) ---------- */
.cma-mockup-frame {
  background: #0a0a14;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  padding: 12px;
}

.cma-mockup-label {
  color: #555;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cma-mockup-section-label {
  color: #888;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 4px;
}

.cma-mockup-input {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 8px 10px;
  color: #e0e0e0;
  font-size: 12px;
  min-height: 16px;
  font-family: monospace;
}

.cma-mockup-input.glow-blue {
  border-color: #0d6efd;
  box-shadow: 0 0 8px rgba(13, 110, 253, 0.4);
}

.cma-mockup-cursor {
  display: inline-block;
  width: 1.5px;
  height: 11px;
  background: #0d6efd;
  margin-left: 1px;
  vertical-align: middle;
  animation: cma-cursor-blink 1s step-end infinite;
}

@keyframes cma-cursor-blink { 50% { opacity: 0; } }

.cma-mockup-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  background: #1a3a5a;
  color: #6db0ff;
}

.cma-mockup-btn-blue {
  background: #0d6efd;
  color: #fff;
  padding: 9px;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
  transition: opacity 400ms, box-shadow 400ms;
}

.cma-mockup-btn-blue.glow {
  box-shadow: 0 0 8px rgba(13, 110, 253, 0.4);
}

.cma-mockup-btn-green {
  background: #1e6e2e;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.cma-real-back-btn {
  background: #dc2626;
  color: #fff;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 8px;
}

.cma-real-back-btn.pulse {
  animation: cma-pulse-red 1.4s ease-in-out infinite;
}

@keyframes cma-pulse-red {
  0%, 100% {
    box-shadow: 0 0 0 1.5px #dc2626, 0 0 12px rgba(220, 38, 38, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 3px #dc2626, 0 0 18px rgba(220, 38, 38, 0.95);
    transform: scale(1.03);
  }
}

.cma-upload-area {
  background: #1a1a24;
  border: 1.5px dashed #0d6efd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  margin-bottom: 8px;
}

.cma-upload-icon {
  font-size: 22px;
  color: #0d6efd;
}

.cma-upload-line {
  color: #6db0ff;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}

.cma-upload-sub {
  color: #888;
  font-size: 10px;
  margin-top: 2px;
}

.cma-thumb-strip {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 40px;
  margin-top: 8px;
}

.cma-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #2a2a36;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 300ms ease;
}

.cma-notes-card {
  background: #14141e;
  border-radius: 8px;
  border: 1px solid #2a2a36;
  padding: 10px;
}

.cma-notes-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #e0e0e0;
  font-weight: 500;
}

.cma-notes-textarea {
  background: #0a0a14;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  padding: 7px 9px;
  min-height: 38px;
  color: #b0b0b0;
  font-size: 11px;
  line-height: 1.5;
}

.cma-notes-saved {
  font-size: 9px;
  color: #28a745;
  margin-top: 4px;
  text-align: right;
  transition: opacity 400ms;
}

.cma-progress-bar {
  height: 4px;
  background: #2a2a36;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.cma-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0d6efd, #28a745);
  animation: cma-progress 3s ease-in-out infinite;
}

@keyframes cma-progress {
  0% { width: 5%; }
  100% { width: 90%; }
}

.cma-status-text {
  font-size: 10px;
  color: #888;
  text-align: center;
  margin-bottom: 4px;
}

.cma-result-card {
  background: #14141e;
  border: 1px solid #2a2a36;
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
}

.cma-chat-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
  max-height: 100px;
  overflow: hidden;
  justify-content: flex-end;
}

.cma-bubble-user {
  background: #0d6efd;
  color: #fff;
  padding: 6px 9px;
  border-radius: 12px 12px 2px 12px;
  max-width: 85%;
  font-size: 10px;
  line-height: 1.4;
  align-self: flex-end;
  transition: opacity 300ms;
}

.cma-bubble-ai {
  background: #1e1e2a;
  color: #e0e0e0;
  padding: 6px 9px;
  border-radius: 12px 12px 12px 2px;
  max-width: 88%;
  font-size: 10px;
  line-height: 1.4;
  align-self: flex-start;
  transition: opacity 300ms;
}

.cma-typing-dots { display: inline-flex; gap: 2px; align-items: center; }
.cma-typing-dot {
  width: 4px; height: 4px;
  background: #888;
  border-radius: 50%;
  animation: cma-typing 1.2s infinite ease-in-out;
}
.cma-typing-dot:nth-child(1) { animation-delay: 0s; }
.cma-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.cma-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes cma-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* ---------- CALLOUT BOXES (inside tour slide stage) ---------- */
.cma-callout {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid;
  border-left-width: 3px;
}

.cma-callout-blue {
  background: #0d1a2a;
  border-color: #1a3a5a;
  border-left-color: #0d6efd;
}

.cma-callout-red {
  background: #2a0d0d;
  border-color: #5a1a1a;
  border-left-color: #dc2626;
}

.cma-callout-green {
  background: #0d1f15;
  border-color: #1a3a25;
  border-left-color: #28a745;
}

.cma-callout-amber {
  background: #2a1f0d;
  border-color: #4a3a15;
  border-left-color: #ffc107;
}

.cma-callout-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.cma-callout-icon.arrow-up {
  animation: cma-arrow-up 1.4s ease-in-out infinite;
  display: inline-block;
}

@keyframes cma-arrow-up {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-5px); opacity: 0.4; }
}

.cma-callout-title { font-size: 11px; font-weight: 600; line-height: 1.5; }
.cma-callout-body { font-size: 11px; line-height: 1.5; margin-top: 2px; }

.cma-callout-blue .cma-callout-icon { color: #0d6efd; }
.cma-callout-blue .cma-callout-title { color: #6db0ff; }
.cma-callout-blue .cma-callout-body { color: #aabbdd; }

.cma-callout-red .cma-callout-icon { color: #ff6b6b; }
.cma-callout-red .cma-callout-title { color: #ff6b6b; }
.cma-callout-red .cma-callout-body { color: #ddaaaa; }

.cma-callout-green .cma-callout-icon { color: #28a745; }
.cma-callout-green .cma-callout-title { color: #5fbf6f; }
.cma-callout-green .cma-callout-body { color: #aabbaa; }

.cma-callout-amber .cma-callout-icon { color: #ffc107; }
.cma-callout-amber .cma-callout-title { color: #d4a52e; }
.cma-callout-amber .cma-callout-body { color: #c4b58a; }