/* App page styles — Custom Patterns */

/* ===== APP SHELL ===== */
.app-main {
  padding: 96px 48px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.app-header { margin-bottom: 48px; }
.app-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: 12px;
}
.app-subtitle { color: var(--text-dim); font-size: 1rem; max-width: 520px; }

/* ===== GRID ===== */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

/* ===== PANELS ===== */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}

.panel-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}

/* ===== CAMERA ===== */
.camera-section {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-alt);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

#videoInput, #videoCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#videoCanvas { pointer-events: none; }

.camera-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10,10,15,0.6);
}

.camera-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

.camera-controls { display: flex; gap: 12px; }

.record-bar {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 20px;
}

.record-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff4444;
  animation: blink 1s step-start infinite;
}

@keyframes blink { 50% { opacity: 0; } }

#recordTime { font-family: var(--font-mono); font-size: 0.75rem; }

/* ===== FILE UPLOAD ===== */
.upload-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.upload-divider::before, .upload-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.file-upload-area { width: 100%; }

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-dim);
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.file-upload-label:hover { border-color: var(--teal); background: var(--teal-dim); color: var(--text); }
.file-upload-label small { font-size: 0.75rem; color: var(--text-muted); }

/* ===== VIDEO PREVIEW ===== */
.video-preview {
  position: relative;
  margin-top: 16px;
}
.video-preview video { width: 100%; border-radius: 8px; max-height: 280px; object-fit: cover; }
.btn-sm { padding: 4px 12px; font-size: 0.75rem; }

/* ===== GOALS ===== */
.goals-input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.goals-input:focus { border-color: var(--teal); }
.goals-input::placeholder { color: var(--text-muted); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.1s;
  width: 100%;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-teal { background: var(--teal); color: #000; }
.btn-amber { background: var(--amber); color: #000; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

.btn-hint {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* ===== RESULTS ===== */
.results-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.results-divider::before, .results-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.response-card {
  background: var(--teal-dim);
  border: 1px solid rgba(0,255,209,0.2);
  border-radius: 10px;
  padding: 20px;
}

.response-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}

.session-meta {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.share-bar { display: flex; }

.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-family: var(--font);
  font-weight: 400;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  color: var(--text-dim);
  line-height: 1;
}
.btn-sm:hover { border-color: var(--teal); color: var(--teal); }
.btn-sm svg { flex-shrink: 0; }

/* ===== EMAIL CAPTURE ===== */
#emailCapture { background: var(--surface); }
#emailCaptureInput:focus { border-color: var(--teal); }
#emailCaptureInput::placeholder { color: var(--text-muted); }

/* ===== ERROR ===== */
.error-msg {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(255,80,80,0.1);
  border: 1px solid rgba(255,80,80,0.3);
  border-radius: 8px;
  color: #ff6666;
  font-size: 0.85rem;
}

/* ===== HISTORY ===== */
.history-section { margin-top: 48px; }
.section-header { margin-bottom: 20px; }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.history-item:hover { border-color: var(--teal); }

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.history-goals {
  font-size: 0.875rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}
.history-time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.history-snippet {
  font-size: 0.8rem;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== LOADING ===== */
.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4) infinite;
}
@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

@media (max-width: 768px) {
  .upload-grid { grid-template-columns: 1fr; }
  .app-main { padding: 80px 20px 40px; }
}