/* Talk2Form Mobile-First Design System */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Colors */
  --bg-dark: #1a1a2e;
  --bg-darker: #0f172a;
  --bg-card: #1e293b;
  --bg-light: #f8fafc;
  --bg-white: #ffffff;

  --text-primary: #1a202c;
  --text-secondary: #94a3b8;
  --text-light: #e2e8f0;
  --text-muted: #64748b;
  --text-muted-3: #475569;

  --primary: #3b82f6;
  --primary-hover: #2563eb;

  --success: #22c55e;
  --success-bg: #dcfce7;
  --success-text: #15803d;

  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;

  --error: #ef4444;
  --error-bg: #fee2e2;
  --error-text: #991b1b;

  /* Status colors (extended for mockup) */
  --processing-bg: #ede9fe;
  --processing-text: #6d28d9;

  --review-bg: #dbeafe;
  --review-text: #1d4ed8;

  --danger: #ef4444;
  --danger-bg: #fff5f5;
  --danger-border: #fca5a5;

  --border: #e2e8f0;
  --border-dark: #334155;

  /* Dark screen aliases */
  --dark-secondary: #1e293b;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Border radius (legacy - kept for PlatformAdmin compatibility) */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  /* Border radius (Mockup-aligned tokens for mobile screens) */
  --radius-card: 16px;
  --radius-field: 14px;
  --radius-icon: 12px;
  --radius-cta: 20px;
  --radius-pill: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
  --shadow-blue: 0 8px 24px rgba(59,130,246,0.4);

  /* Typography scale (Mockup-aligned) */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 22px;
  --font-size-timer: 42px;

  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Finales Farbschema: dunkles Chrome + Petrol-Akzent (Referenzmockup v1) */
  --chrome-dark: #1e222b;
  --accent: #2b6e66;
  --accent-on-dark: #a9ecdd;
  --danger: #a13f35;
  --icon-badge-bg: #f0f0ec;
  --icon-badge-fg: #33383f;
  --success-soft: #ddf3ee;
  --success-soft-text: #12463d;
  --warn-text: #9a4a1d;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-light);
  color: var(--text-primary);
  line-height: 1.6;
}

/* App Container */
.app-container {
  max-width: 430px;
  margin: 0 auto;
  background: var(--bg-white);
  height: 100vh;              /* FIX: Changed from min-height to height - prevents body scroll */
  display: flex;
  flex-direction: column;
}

/* App Header */
.app-header {
  background: var(--chrome-dark);
  padding: 10px 24px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.app-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.header-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.app-name {
  font-size: 19px;
  font-weight: 800;
  color: #f7f7f5;
  letter-spacing: -0.4px;
}

.app-name span {
  color: var(--accent);
}

/* Header Row for Title + Resume Chip */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Role Chip */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 1.25rem;
  font-weight: 600;
  flex-shrink: 0;
}

.role-technician {
  background: #dbeafe;
  color: #1e40af;
}

.role-tenantadmin {
  background: #fef3c7;
  color: #92400e;
}

.role-office {
  background: #e0e7ff;
  color: #3730a3;
}

.role-platformadmin {
  background: #f3e8ff;
  color: #6b21a8;
}

.role-unknown {
  background: #f3f4f6;
  color: #6b7280;
}

/* Sync Badge */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 1.25rem;
  font-weight: 600;
  margin-top: 3px;
  flex-shrink: 0;
}

.sync-ok {
  background: var(--success-soft);
  color: var(--success-soft-text);
}

.sync-pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.sync-error {
  background: var(--error-bg);
  color: var(--error-text);
}

/* Sync Status Dots */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dot-green {
  background: #22c55e;
}

.dot-yellow {
  background: #f59e0b;
  animation: pulse 1.5s infinite;
}

.dot-red {
  background: #ef4444;
}

/* Legacy dot classes (fallback) */
.sync-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  display: inline-block;
}

.sync-dot-green {
  background: var(--success);
}

.sync-dot-yellow {
  background: var(--warning);
  animation: pulse 1.5s infinite;
}

.sync-dot-red {
  background: var(--error);
}

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

/* Powered by Logo */
.powered-by {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.powered-by-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
}

/* CTA Section */
.cta-section {
  background: var(--bg-white);
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.btn-record-main {
  width: 100%;
  padding: 15px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.0625rem;        /* 17px - vorher 1.25rem (20px) */
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;               /* 10px - vorher 0.75rem (12px) */
  box-shadow: 0 1px 2px rgba(20,20,25,.08), 0 6px 14px rgba(20,20,25,.10);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.btn-record-main:hover {
  transform: translateY(-2px);
  background: var(--accent);
}

.btn-record-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  border-radius: inherit;
}

.btn-record-main.offline-mode {
  background: #64748b;
  box-shadow: 0 4px 16px rgba(100, 116, 139, 0.3);
}

.btn-record-main.offline-mode:hover {
  background: #475569;
}

.mic-icon-large {
  font-size: 1.5rem;           /* 24px - vorher 1.75rem (28px) */
}

/* Section Title */
.section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 1.5rem 0.625rem;
}

/* Pending Card */
/* Scrollbare Dashboard-Sektionen - volle Breite mit Innenabstand */
.scroll-section {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.pending-card {
  margin: 0 0 0.625rem;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pending-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pending-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--warning-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.pending-info {
  flex: 1;
}

.pending-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.pending-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

/* Status Pills */
.status-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 1.25rem;
  white-space: nowrap;
}

.pill-pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.pill-done {
  background: var(--success-bg);
  color: var(--success-text);
}

.pill-processing {
  background: #ede9fe;
  color: #6d28d9;
}

.pill-review {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Report Card */
.report-card {
  margin: 0 0 0.625rem;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.report-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.report-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.report-info {
  flex: 1;
}

.report-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.report-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

.report-author {
  color: #94a3b8;
  font-weight: 600;
}

/* Bottom Navigation */
.bottom-nav {
  background: var(--chrome-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7px 0 14px;
  display: flex;
  justify-content: space-around;
  flex-shrink: 0;
  margin-top: auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: #9aa3b2;
  padding: 4px 14px;
  border-radius: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.2s;
}

.nav-item:hover {
  color: var(--accent-on-dark);
}

.nav-item.active {
  color: var(--accent-on-dark);
}

.nav-icon {
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.nav-icon svg {
  display: block;
}

/* Offline Banner */
.offline-banner {
  background: rgba(251, 146, 60, 0.1);
  color: #f97316;
  border-bottom: 1px solid rgba(251, 146, 60, 0.2);
  padding: 0.625rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  animation: pulse-offline 2s ease-in-out infinite;
}

@keyframes pulse-offline {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.offline-icon {
  font-size: 1rem;
  animation: rotate-icon 3s linear infinite;
}

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

/* Auth Page */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  background: var(--bg-darker);
}

.auth-container {
  width: 100%;
  max-width: 400px;
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-header h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.auth-header p {
  color: var(--text-muted);
}

.auth-form {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
}

.btn-primary {
  width: 100%;
  padding: 1rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

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

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

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

/* Quick Management Card (TenantAdmin) */
.quick-mgmt-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.quick-mgmt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quick-mgmt-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.quick-mgmt-info {
  flex: 1;
}

.quick-mgmt-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.quick-mgmt-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.quick-mgmt-arrow {
  font-size: 1.5rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Tenant Detail Card */
.tenant-detail-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  margin: 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.tenant-detail-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.tenant-detail-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Seat Card */
.seat-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin: 0 0 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.seat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #2563eb);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

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

.seat-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.seat-role {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.status-pill-sm {
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.pill-active {
  background: #dcfce7;
  color: #15803d;
}

/* Plan Version Card */
.plan-version-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  margin: 0 1rem 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.plan-version-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.plan-version-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Responsive */
@media (min-width: 768px) {
  .app-container {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

/* Edge-to-edge override for specific screens (e.g., ReportReview) */
.app-container:has(.edge-to-edge) {
  max-width: 100%;
  margin: 0;
}

@media (min-width: 768px) {
  .app-container:has(.edge-to-edge) {
    border-left: none;
    border-right: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   REPORT REVIEW (SCREEN 3) – Mockup-aligned styles
──────────────────────────────────────────────────────────────────── */

.review-header {
  background: #fff;
  padding: 10px 24px 8px;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  box-shadow: none;
}

.review-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a202c;
}

.review-subtitle {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 10px;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 20px;
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 600;
  margin-top: 6px;
}

.photo-section {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  min-height: 0;
  height: auto;
}

.photo-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.photo-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.photo-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.photo-add {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 2px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #94a3b8;
  flex-shrink: 0;
  cursor: pointer;
}

.photos-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.review-sections {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  background: #f8fafc;
}

.scroll-fade::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, #f8fafc);
  pointer-events: none;
}

.field-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  box-shadow: none;
  min-height: 0;
  height: auto;
}

.field-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

.field-value {
  font-size: 15px;
  color: #1a202c;
  line-height: 1.5;
}

.field-empty {
  font-size: 14px;
  color: #cbd5e1;
  font-style: italic;
}

.field-missing {
  border-color: #fca5a5;
  background: #fff5f5;
}

.field-missing .field-label {
  color: #ef4444;
}

.missing-hint {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
}

.review-actions {
  padding: 16px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 10px;
}

.skip-signature-link {
  text-align: center;
  padding: 0 16px 14px;
}

.link-button {
  background: transparent;
  border: none;
  font-size: 12px;
  color: #94a3b8;
  text-decoration: underline;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.link-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  flex: 2;
  padding: 16px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-outline {
  flex: 1;
  padding: 16px;
  background: #fff;
  color: #3b82f6;
  border: 2px solid #bfdbfe;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.btn-outline:hover {
  background: #eff6ff;
}

/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL REVIEW SCREEN STRUCTURE STYLES
════════════════════════════════════════════════════════════════════ */

/* Container Structure - THIS IS CRITICAL */
.report-review-page {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  background: #f8fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.review-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f8fafc;
}

/* Step Progress Bar */
.step-progress {
  display: flex;
  gap: 6px;
  background: transparent;
  margin-top: 10px;
}

.step-seg {
  flex: 1;
}

.step-bar {
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
}

.step-bar.done,
.step-bar.active {
  background: #3b82f6;
}

/* Dark header for Recording screen */
.dark-header {
  background: #0f172a;
  padding: 10px 24px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.back-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #e2e8f0;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
}

.dark-title {
  font-size: 16px;
  font-weight: 700;
  color: #e2e8f0;
}

/* Step-bar override for dark background */
.on-dark .step-bar {
  background: rgba(255,255,255,0.18);
}

.on-dark .step-bar.done,
.on-dark .step-bar.active {
  background: #3b82f6;
}

/* ─── SCREEN 2: RECORDING ─── */
.recording-screen {
  background: #0f172a;
  flex: 1;
  min-height: 0;              /* FIX: Allows flex child to shrink below content size */
  overflow: hidden;           /* FIX: Prevents entire screen from scrolling */
  display: flex;
  flex-direction: column;
  color: #fff;
}

.recording-scroll-content {
  flex: 1;
  min-height: 0;              /* CRITICAL: Allows scrolling when content overflows */
  overflow-y: auto;
  padding: 20px 24px;         /* Reduced from 32px to 20px per reference */
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* NO align-items: allows margin-top: auto to work on dock */
}

.recording-hint {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #94a3b8;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
}

.recording-hint em,
.recording-hint strong {
  font-style: normal;
  font-weight: 600;
  color: #e2e8f0;
}

.waveform-area {
  width: 100%;
  height: 80px;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 20px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Dock Waveform (NEW - compact version for the fixed dock) */
.dock-waveform-area {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
}

.dock-wave-bar {
  width: 2.5px;
  border-radius: 2px;
  background: #3b82f6;
  opacity: 0.85;
  transition: height 0.1s ease;
}

.recording-action-dock {
  width: 100%;                /* CRITICAL: Ensures full width for margin-top auto */
  flex-shrink: 0;
  background: #0f172a;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: auto;           /* CRITICAL: Pushes dock to bottom of scroll-content */
}

.mic-button-wrap {
  position: relative;
  margin-bottom: 0;
}

.mic-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.3);
  animation: ring-pulse 1.5s ease-out infinite;
}

.mic-ring-2 {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.15);
  animation: ring-pulse 1.5s ease-out infinite 0.5s;
}

@keyframes ring-pulse {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

.mic-button-active {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 24px rgba(239,68,68,0.5);
  cursor: pointer;
  position: relative;
  z-index: 1;
  border: none;
}

.recording-timer {
  font-size: 19px;
  font-weight: 200;
  letter-spacing: 0.04em;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.recording-timer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;                /* Ensures full width alignment */
  justify-content: center;    /* Centers timer horizontally */
}

.recording-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulse 1s infinite;
}

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

.dock-actions-row {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: stretch;       /* Ensures buttons take full height */
}

.btn-icon-secondary-dark {
  min-width: 110px;           /* Reduced from 118px to 110px per reference */
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 14px;        /* Reduced from 16px to 14px per reference */
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;            /* Reduced from 14px to 13px per reference */
  font-weight: 600;
  padding: 0 14px;            /* Reduced from 16px to 14px per reference */
  cursor: pointer;
  line-height: 1;
  height: 48px;               /* Fixed height: 48px */
}

.btn-secondary {
  flex: 1;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: #94a3b8;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.btn-primary-large-dark {
  flex: 1;
  border-radius: 14px;        /* Reduced from 16px to 14px per reference */
  background: #fff;
  color: #1a202c;
  font-size: 13px;            /* Reduced from 14px to 13px per reference */
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;            /* Reduced from 16px to 14px per reference */
  cursor: pointer;
  border: none;
  line-height: 1;
  height: 42px;
}

.btn-stop {
  flex: 2;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  color: #1a202c;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Ensure review-actions stays at bottom */
.review-actions {
  flex-shrink: 0;
}

/* Loading/Error/Warning States */
.loading-state,
.error-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: #f8fafc;
  text-align: center;
  gap: 16px;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.error-icon {
  font-size: 64px;
}

.loading-state h2,
.error-state h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.loading-state p,
.error-state p {
  font-size: 15px;
  color: #64748b;
  margin: 0;
}

.warning-box,
.info-box {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 14px;
  padding: 16px;
  margin: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-shrink: 0;
}

.info-box {
  background: #eff6ff;
  border-color: #93c5fd;
}

.warning-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.warning-content {
  flex: 1;
}

.warning-content strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 4px;
}

.warning-content p {
  font-size: 14px;
  color: #78350f;
  margin: 0;
}

/* Document Generation Section */
.document-generation-section {
  background: #fff;
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.generated-docs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-info {
  flex: 1;
}

.doc-type {
  font-size: 14px;
  font-weight: 700;
  color: #1a202c;
}

.doc-date {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.doc-actions {
  display: flex;
  gap: 8px;
}

.btn-outline-sm {
  padding: 8px 12px;
  background: #fff;
  color: #3b82f6;
  border: 1.5px solid #bfdbfe;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-outline-sm:hover {
  background: #eff6ff;
}

.save-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px;
  font-size: 14px;
  color: #991b1b;
  text-align: center;
  flex-shrink: 0;
}

/* ================================================================
   GENERIC SCREEN ARCHITECTURE (Top / Content / Bottom)
   Used by all 5 mobile screens: Dashboard, Recording, Review, Export, Offline
   ================================================================ */

/* Main screen container - fixed viewport height, no body scroll */
.screen-page {
  height: 100dvh;              /* Use dynamic viewport height for mobile */
  height: 100vh;               /* Fallback for older browsers */
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* Page itself never scrolls */
  background: #f9f9f7;
}

/* Dark variant for Recording + Offline screens */
.screen-page--dark {
  background: var(--bg-darker);
}

/* Top section - fixed, always visible */
.screen-top {
  flex-shrink: 0;              /* Never compress */
  z-index: 10;                 /* Stay above content */
}

/* Content section - scrollable area */
.screen-content {
  flex: 1;                     /* Take all remaining space */
  min-height: 0;               /* Critical: allows flex child to overflow */
  overflow-y: auto;            /* Only content scrolls */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Content scroll behavior variants */
.screen-content--no-padding {
  padding: 0;
}

/* Override for recording screen: disable scroll on outer container */
.screen-content--no-scroll {
  overflow: hidden;           /* Fix: allows inner .recording-screen flex column to work properly */
  display: flex;              /* CRITICAL: Makes this a flex container so child flex:1 works */
  flex-direction: column;     /* CRITICAL: Allows .recording-screen to stretch vertically */
}

.screen-content--with-padding {
  padding: 16px;
}

/* Bottom section - fixed, always visible */
.screen-bottom {
  flex-shrink: 0;              /* Never compress */
  z-index: 10;                 /* Stay above content */
}

/* ================================================================
   USAGE RULES (for developers):

   1. Every mobile screen MUST use this structure:
      <div class="screen-page [screen-page--dark]">
        <div class="screen-top">...</div>
        <div class="screen-content [modifiers]">...</div>
        <div class="screen-bottom">...</div>
      </div>

   2. NEVER add overflow/scroll to .screen-page or body
   3. ONLY .screen-content scrolls
   4. Top and Bottom are ALWAYS visible (sticky)
   5. Content height adapts to available space
   ================================================================ */