:root {
  --primary: #8a2be2;
  --primary-light: #9d4edd;
  --secondary: #4a7bff;
  --secondary-light: #6c9bff;
  --dark: #1e1e2e;
  --darker: #12121a;
  --light: #f5f5f7;
  --gray: #a1a1aa;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: var(--darker);
  color: var(--light);
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header Styles */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo i {
  font-size: 1.8rem;
  color: var(--primary);
}

.logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav {
  display: flex;
  gap: 1rem;
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--gray);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  color: var(--light);
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-btn.active {
  color: var(--primary);
  background-color: rgba(138, 43, 226, 0.1);
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-premium {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.btn-premium:hover {
  transform: translateY(-2px);
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  font-weight: bold;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.tab-content {
  display: none;
}

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

/* Chat Styles */
.chat-container {
  display: flex !important;
  flex-direction: column !important;
  height: 75vh !important; /* Increased from 70vh */
  min-height: 500px;
  max-height: 75vh;
  background-color: var(--dark);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: rgba(138, 43, 226, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

.chat-actions {
  display: flex;
  gap: 0.5rem;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1.5rem !important;
  max-height: calc(75vh - 160px) !important; /* Leaves room for input */
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.message {
  display: flex;
  gap: 1rem;
  max-width: 80%;
}

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

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

.message-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-message .message-avatar {
  background-color: var(--secondary);
}

.ai-message .message-avatar {
  background-color: var(--primary);
}

.message-content {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.user-message .message-content {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
  border-top-right-radius: 0.25rem;
}

.ai-message .message-content {
  border-top-left-radius: 0.25rem;
}

.message-content p {
  line-height: 1.5;
}

.technique-suggestion {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(138, 43, 226, 0.1);
  border-radius: 0.5rem;
  border-left: 3px solid var(--primary);
}

.technique-suggestion h4 {
  margin-bottom: 0.5rem;
  color: var(--primary-light);
}

.technique-steps {
  margin-left: 1rem;
}

.technique-steps li {
  margin-bottom: 0.5rem;
}

.chat-input-container {
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.input-wrapper {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#message-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--light);
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

#message-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.2);
}

#send-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#send-btn:hover {
  transform: scale(1.05);
}

.quick-responses {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quick-response {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--light);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-response:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Techniques Tab */
.techniques-container h2 {
  margin-bottom: 1.5rem;
}

.techniques-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.technique-card {
  background-color: var(--dark);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

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

.technique-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.technique-icon i {
  font-size: 1.5rem;
  color: white;
}

.technique-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.technique-card p {
  color: var(--gray);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.btn-learn-more {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-learn-more:hover {
  background-color: var(--primary);
  color: white;
}

/* Profile Tab */
.profile-container h2 {
  margin-bottom: 1.5rem;
}

.profile-card {
  background-color: var(--dark);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2rem;
}

.profile-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar i {
  font-size: 2rem;
  color: white;
}

.profile-info h3 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.profile-email {
  color: var(--gray);
  margin-bottom: 1rem;
}

.profile-stats {
  display: flex;
  gap: 2rem;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--gray);
}

.profile-section {
  background-color: var(--dark);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.profile-section h3 {
  margin-bottom: 1rem;
}

.subscription-status {
  padding: 1rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
}

.status-premium {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #f59e0b;
  font-weight: 600;
}

.status-free {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray);
}

.progress-chart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chart-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chart-label {
  width: 100px;
  font-size: 0.9rem;
}

.chart-progress {
  flex: 1;
  height: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 1rem;
}

.chart-value {
  width: 40px;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Settings Tab */
.settings-container h2 {
  margin-bottom: 1.5rem;
}

.settings-section {
  background-color: var(--dark);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.settings-section h3 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.setting-info h4 {
  margin-bottom: 0.25rem;
}

.setting-info p {
  color: var(--gray);
  font-size: 0.9rem;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

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

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

.btn-report, .btn-contact, .btn-logout {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--light);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-report:hover, .btn-contact:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-logout {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger);
}

.btn-logout:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--dark);
  border-radius: 1rem;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

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

.modal-header h2 {
  font-size: 1.5rem;
}

.close-modal {
  background: transparent;
  border: none;
  color: var(--gray);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-modal:hover {
  color: var(--light);
}

.modal-body {
  padding: 1.5rem;
}

.technique-detail {
  line-height: 1.6;
}

.technique-detail h3 {
  margin: 1.5rem 0 0.5rem;
  color: var(--primary-light);
}

.technique-detail h3:first-child {
  margin-top: 0;
}

.technique-detail ul, .technique-detail ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.technique-detail li {
  margin-bottom: 0.5rem;
}

/* Auth Modal Styles */
.auth-modal {
  max-width: 400px;
}

.auth-tabs {
  display: flex;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-tab {
  background: none;
  border: none;
  color: var(--gray);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.auth-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

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

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--light);
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--light);
}

.btn-auth {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
}

/* Payment System Styles */
.payment-modal {
  text-align: center;
}

.pricing-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.pricing-option {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

.pricing-option:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.pricing-option.featured {
  border-color: var(--primary);
  background: rgba(138, 43, 226, 0.1);
}

.popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.pricing-option h4 {
  margin-bottom: 1rem;
  color: var(--primary-light);
}

.price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.price span {
  font-size: 1rem;
  color: var(--gray);
}

.pricing-option ul {
  text-align: left;
  margin: 1rem 0;
  list-style: none;
}

.pricing-option li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.btn-purchase {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.btn-purchase:hover {
  transform: translateY(-2px);
}

/* Payment Form Styles */
.payment-form {
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.card-input {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--light);
  font-size: 1rem;
}

.card-input:focus {
  border-color: var(--primary);
  outline: none;
}

.btn-pay-now {
  width: 100%;
  background: linear-gradient(135deg, var(--success), #22c55e);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
}

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

/* Payment Success */
.payment-success {
  text-align: center;
  padding: 2rem;
}

.success-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.premium-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}

.feature {
  text-align: center;
}

.feature i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  display: block;
}

/* Test Cards */
.test-cards {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  font-size: 0.85rem;
}

.test-cards p {
  margin: 0.25rem 0;
}

/* Session Limit Warning */
.session-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
}

.session-warning p {
  margin-bottom: 0.5rem;
}

.btn-upgrade-now {
  background: linear-gradient(135deg, var(--warning), #f59e0b);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Voice Recording States */
#voice-btn.recording {
  background-color: var(--danger) !important;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
      box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Technique Options */
.technique-option {
  margin: 15px 0;
  padding: 15px;
  background: rgba(138, 43, 226, 0.1);
  border-radius: 8px;
}

.technique-option h4 {
  color: var(--primary-light);
  margin-bottom: 8px;
}

/* Light Mode Support */
body.light-mode {
  --dark: #ffffff;
  --darker: #f5f5f7;
  --light: #1e1e2e;
  --gray: #6b7280;
  background-color: var(--darker);
  color: var(--light);
}

body.light-mode .chat-container,
body.light-mode .technique-card,
body.light-mode .profile-card,
body.light-mode .profile-section,
body.light-mode .settings-section {
  background-color: var(--dark);
  border: 1px solid #e5e7eb;
}

body.light-mode .message-content {
  background-color: #f9fafb;
  color: #374151;
}

body.light-mode .user-message .message-content {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
  color: white;
}

body.light-mode .technique-suggestion {
  background-color: rgba(138, 43, 226, 0.05);
  border-left: 3px solid var(--primary);
}

body.light-mode #message-input {
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
}

body.light-mode .quick-response {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

body.light-mode .quick-response:hover {
  background: #e5e7eb;
}

body.light-mode .pricing-option {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

body.light-mode .pricing-option.featured {
  background: rgba(138, 43, 226, 0.05);
}

body.light-mode .card-input {
  background: white;
  border: 1px solid #d1d5db;
  color: #374151;
}

body.light-mode .test-cards {
  background: #f3f4f6;
}

body.light-mode .subscription-status {
  background: #f9fafb;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header {
      padding: 1rem;
      flex-wrap: wrap;
      gap: 1rem;
  }
  
  .nav {
      order: 3;
      width: 100%;
      justify-content: center;
  }
  
  .main-content {
      padding: 1rem;
  }
  
  .techniques-grid {
      grid-template-columns: 1fr;
  }
  
  .profile-card {
      flex-direction: column;
      text-align: center;
  }
  
  .profile-stats {
      justify-content: center;
  }
  
  .message {
      max-width: 90%;
  }
  
  .quick-responses {
      justify-content: center;
  }
  
  .user-actions {
      gap: 0.5rem;
  }
  
  .btn-premium {
      padding: 0.5rem 0.75rem;
      font-size: 0.9rem;
  }
  
  .pricing-options {
      grid-template-columns: 1fr;
  }
  
  .form-row {
      grid-template-columns: 1fr;
  }
  
  .premium-features {
      flex-direction: column;
      gap: 1rem;
  }
}
.session-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--secondary);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
}

.session-info p {
  margin-bottom: 0.5rem;
}

body.light-mode .session-info {
  background: rgba(59, 130, 246, 0.05);
}
/* Yoco Card Fields */
.yoco-card-field {
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  min-height: 45px;
  display: flex;
  align-items: center;
}

.yoco-card-field iframe {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

body.light-mode .yoco-card-field {
  background: white;
  border: 1px solid #d1d5db;
}

/* Payment Amount */
.payment-amount {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(138, 43, 226, 0.1);
  border-radius: 0.5rem;
}

/* Payment Security */
.payment-security {
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  margin-top: 1rem;
}

.payment-security i {
  color: var(--success);
  margin-right: 0.5rem;
}

/* Success Actions */
.success-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.success-actions button {
  flex: 1;
}

.btn-view-profile {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--light);
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-view-profile:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* Payment Instructions */
.payment-instructions {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--secondary);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.payment-instructions p {
  margin: 0.5rem 0;
}

/* Payment Buttons */
.payment-buttons {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}

.btn-simulate-success {
  flex: 2;
  background: linear-gradient(135deg, var(--success), #22c55e);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-simulate-failure {
  flex: 1;
  background: linear-gradient(135deg, var(--danger), #ef4444);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-simulate-success:hover {
  transform: translateY(-2px);
}

.btn-simulate-failure:hover {
  transform: translateY(-2px);
}

.btn-simulate-success:disabled,
.btn-simulate-failure:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Light mode support */
body.light-mode .payment-instructions {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid #3b82f6;
}
/* Payment Actions */
.payment-actions {
  margin: 1.5rem 0;
  text-align: center;
}

.btn-back {
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--gray);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--light);
}

/* Payment Form in Payment Modal */
#payment-modal .modal-content {
  max-width: 500px;
}

#payment-modal .payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

#payment-modal .btn-simulate-success,
#payment-modal .btn-simulate-failure {
  padding: 1.5rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

#payment-modal .btn-simulate-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: 2px solid #10b981;
}

#payment-modal .btn-simulate-failure {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: 2px solid #ef4444;
}

#payment-modal .btn-simulate-success:hover,
#payment-modal .btn-simulate-failure:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Yoco Card Fields */
.yoco-field {
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  min-height: 45px;
  margin-bottom: 1rem;
}

.yoco-field iframe {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

body.light-mode .yoco-field {
  background: white;
  border: 1px solid #d1d5db;
}

/* Real Pay Button */
.btn-pay-now {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 1.2rem;
  border-radius: 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 1rem 0;
}

.btn-pay-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(138, 43, 226, 0.3);
}

.btn-pay-now:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
/* Payment Loading */
.payment-loading {
  text-align: center;
  padding: 2rem;
  color: var(--primary);
}

/* Retry Button */
.btn-retry {
  background: linear-gradient(135deg, var(--warning), #f59e0b);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-retry:hover {
  transform: translateY(-2px);
}
/* Yoco Setup Info */
.yoco-setup-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--secondary);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.yoco-setup-info p {
  margin: 0.5rem 0;
}

body.light-mode .yoco-setup-info {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid #3b82f6;
}
/* Payment History */
.payment-history {
  max-height: 400px;
  overflow-y: auto;
}

.no-payments {
  text-align: center;
  padding: 2rem;
  color: var(--gray);
}

.no-payments i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
}

.payment-info {
  flex: 1;
}

.payment-type {
  font-weight: 600;
  color: var(--primary-light);
}

.payment-date {
  font-size: 0.85rem;
  color: var(--gray);
}

.payment-amount {
  font-weight: 700;
  color: var(--success);
  margin: 0 1rem;
}

.payment-status {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.payment-status.completed {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border: 1px solid var(--success);
}

.payment-status.failed {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.btn-receipt {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  margin-left: 1rem;
}

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

/* Light mode support */
body.light-mode .payment-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

body.light-mode .btn-receipt {
  border: 1px solid var(--primary);
  color: var(--primary);
}

body.light-mode .btn-receipt:hover {
  background: var(--primary);
  color: white;
}
/* Real Payment Options */
.payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

.payment-option-real,
.payment-option-sim {
  padding: 1.5rem;
  border-radius: 0.75rem;
  text-align: center;
}

.payment-option-real {
  background: rgba(16, 185, 129, 0.1);
  border: 2px solid var(--success);
}

.payment-option-sim {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid var(--secondary);
}

.payment-option-real h4,
.payment-option-sim h4 {
  margin-bottom: 0.5rem;
  color: var(--light);
}

.payment-option-real p,
.payment-option-sim p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--gray);
}

.btn-real-payment {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-real-payment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* Real Test Cards */
.test-cards-real {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

/* Yoco Dashboard Button */
.btn-yoco-dashboard {
  background: linear-gradient(135deg, #8a2be2, #9d4edd);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-yoco-dashboard:hover {
  transform: translateY(-2px);
}

/* Loading Spinner */
.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid var(--primary);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 1rem auto;
}

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

/* Payment Error */
.payment-error {
  text-align: center;
  padding: 2rem;
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: var(--danger);
}
/* Yoco Card Fields Styling */
#card-frame {
  margin: 1.5rem 0;
}

.yoco-field {
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  min-height: 45px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.yoco-field iframe {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

.yoco-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.2);
}

body.light-mode .yoco-field {
  background: white;
  border: 1px solid #d1d5db;
}

body.light-mode .yoco-field:focus-within {
  border-color: var(--primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

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

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--light);
  font-weight: 500;
}

body.light-mode .form-group label {
  color: var(--dark);
}

/* Payment Security */
.payment-security {
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  margin-top: 1rem;
}

.payment-security i {
  color: var(--success);
  margin-right: 0.5rem;
}

/* Yoco Setup Info */
.yoco-setup-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--secondary);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.yoco-setup-info p {
  margin: 0.5rem 0;
}

body.light-mode .yoco-setup-info {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid #3b82f6;
}

/* Loading Spinner */
.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid var(--primary);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 1rem auto;
}

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

/* Payment Error */
.payment-error {
  text-align: center;
  padding: 2rem;
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: var(--danger);
}

.btn-retry {
  background: linear-gradient(135deg, var(--warning), #f59e0b);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-retry:hover {
  transform: translateY(-2px);
}

/* Real Pay Button */
.btn-pay-now {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 1.2rem;
  border-radius: 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 1rem 0;
}

.btn-pay-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(138, 43, 226, 0.3);
}

.btn-pay-now:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
/* New Payment Method Styles */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.payment-method {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method:hover {
  border-color: var(--primary);
  background: rgba(138, 43, 226, 0.1);
  transform: translateY(-2px);
}

.method-icon {
  font-size: 2rem;
  margin-right: 1rem;
}

.method-info {
  flex: 1;
}

.method-info h4 {
  margin-bottom: 0.25rem;
  color: var(--light);
}

.method-info p {
  color: var(--gray);
  font-size: 0.9rem;
}

.method-arrow {
  font-size: 1.5rem;
  color: var(--primary);
}

/* Yoco Payment Buttons */
.yoco-payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.btn-yoco-payment {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 1.5rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-yoco-payment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(138, 43, 226, 0.3);
}

.btn-simulate-payment {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--secondary);
  color: var(--light);
  padding: 1.2rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-simulate-payment:hover {
  background: rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.yoco-icon, .simulate-icon {
  font-size: 1.2rem;
}

/* Test Card Info */
.test-card-info {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.test-card-info p {
  margin: 0.25rem 0;
}

/* Payment Processing */
.payment-processing {
  text-align: center;
  padding: 2rem;
}

.processing-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-complete-payment {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-complete-payment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* Light mode support */
body.light-mode .payment-method {
  background: #f9fafb;
  border: 2px solid #e5e7eb;
}

body.light-mode .payment-method:hover {
  border-color: var(--primary);
  background: rgba(138, 43, 226, 0.05);
}

body.light-mode .btn-simulate-payment {
  background: #f3f4f6;
  border: 2px solid #3b82f6;
  color: #1e1e2e;
}

body.light-mode .test-card-info {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid #f59e0b;
}
/* Payment Verification Styles */
.payment-verification {
  text-align: left;
}

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

.verification-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.verification-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.verification-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  border-left: 4px solid var(--gray);
  transition: all 0.3s ease;
}

.verification-step.active {
  border-left-color: var(--primary);
  background: rgba(138, 43, 226, 0.1);
}

.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gray);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.verification-step.active .step-number {
  background: var(--primary);
}

.step-info h4 {
  margin-bottom: 0.5rem;
  color: var(--light);
}

.step-info p {
  color: var(--gray);
  margin: 0.25rem 0;
}

.verification-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0.5rem;
}

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

.verification-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.btn-check-again {
  background: linear-gradient(135deg, var(--secondary), #3b82f6);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-check-again:hover {
  transform: translateY(-2px);
}

.btn-manual-verify {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--warning);
  color: var(--light);
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-manual-verify:hover {
  background: rgba(245, 158, 11, 0.1);
  transform: translateY(-2px);
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--gray);
  padding: 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--light);
}

.payment-help {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--secondary);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1rem;
}

.payment-help p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

/* Manual Verification Styles */
.manual-verification {
  text-align: left;
}

.manual-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.manual-step {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  border-left: 4px solid var(--secondary);
}

.manual-step h4 {
  margin-bottom: 0.5rem;
  color: var(--primary-light);
}

.email-address {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}

.btn-copy-email {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.verification-details {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.verification-details ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.verification-details li {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
}

.verification-details input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--light);
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
  width: 200px;
}

.manual-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.btn-sent-email {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border: none;
  padding: 1.2rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-sent-email:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.verification-note {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Verification Confirmed */
.verification-confirmed {
  text-align: center;
}

.confirmation-details {
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 1rem;
  margin: 1.5rem 0;
}

.confirmation-details ul {
  margin: 1rem 0;
}

.confirmation-details li {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
}

.confirmation-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.btn-contact-support {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid var(--secondary);
  color: var(--light);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-contact-support:hover {
  background: rgba(59, 130, 246, 0.2);
}

.support-info {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Timeout Styles */
.verification-timeout {
  text-align: center;
}

.timeout-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.timeout-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.btn-try-again {
  background: linear-gradient(135deg, var(--secondary), #3b82f6);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.timeout-help {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.75rem;
  margin-top: 1rem;
  text-align: left;
}

.timeout-help ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

/* Light mode support */
body.light-mode .verification-step,
body.light-mode .manual-step {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

body.light-mode .verification-details,
body.light-mode .confirmation-details {
  background: #f3f4f6;
}

body.light-mode .payment-help,
body.light-mode .verification-note,
body.light-mode .timeout-help {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid #3b82f6;
}

body.light-mode .email-address {
  background: #f3f4f6;
}
/* Payment Verification Styles */
.payment-verification {
  text-align: left;
}

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

.verification-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.verification-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.verification-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  border-left: 4px solid var(--gray);
  transition: all 0.3s ease;
}

.verification-step.active {
  border-left-color: var(--primary);
  background: rgba(138, 43, 226, 0.1);
}

.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gray);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.verification-step.active .step-number {
  background: var(--primary);
}

.step-info h4 {
  margin-bottom: 0.5rem;
  color: var(--light);
}

.step-info p {
  color: var(--gray);
  margin: 0.25rem 0;
}

.verification-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0.5rem;
}

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

.verification-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.btn-check-again {
  background: linear-gradient(135deg, var(--secondary), #3b82f6);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-check-again:hover {
  transform: translateY(-2px);
}

.btn-manual-verify {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--warning);
  color: var(--light);
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-manual-verify:hover {
  background: rgba(245, 158, 11, 0.1);
  transform: translateY(-2px);
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--gray);
  padding: 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--light);
}

.payment-help {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--secondary);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1rem;
}

.payment-help p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

/* Manual Verification Styles */
.manual-verification {
  text-align: left;
}

.manual-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.manual-step {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  border-left: 4px solid var(--secondary);
}

.manual-step h4 {
  margin-bottom: 0.5rem;
  color: var(--primary-light);
}

.email-address {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
}

.btn-copy-email {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.verification-details {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.verification-details ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.verification-details li {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
}

.verification-details input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--light);
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
  width: 200px;
}

.manual-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.btn-sent-email {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border: none;
  padding: 1.2rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-sent-email:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.verification-note {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Verification Confirmed */
.verification-confirmed {
  text-align: center;
}

.confirmation-details {
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 1rem;
  margin: 1.5rem 0;
}

.confirmation-details ul {
  margin: 1rem 0;
}

.confirmation-details li {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
}

.confirmation-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.btn-contact-support {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid var(--secondary);
  color: var(--light);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-contact-support:hover {
  background: rgba(59, 130, 246, 0.2);
}

.support-info {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Timeout Styles */
.verification-timeout {
  text-align: center;
}

.timeout-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.timeout-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.btn-try-again {
  background: linear-gradient(135deg, var(--secondary), #3b82f6);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.timeout-help {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.75rem;
  margin-top: 1rem;
  text-align: left;
}

.timeout-help ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

/* Payment Methods */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.payment-method {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method:hover {
  border-color: var(--primary);
  background: rgba(138, 43, 226, 0.1);
  transform: translateY(-2px);
}

.method-icon {
  font-size: 2rem;
  margin-right: 1rem;
}

.method-info {
  flex: 1;
}

.method-info h4 {
  margin-bottom: 0.25rem;
  color: var(--light);
}

.method-info p {
  color: var(--gray);
  font-size: 0.9rem;
}

.method-arrow {
  font-size: 1.5rem;
  color: var(--primary);
}

.test-card-info {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warning);
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.test-card-info p {
  margin: 0.25rem 0;
}

/* Light mode support */
body.light-mode .verification-step,
body.light-mode .manual-step {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

body.light-mode .verification-details,
body.light-mode .confirmation-details {
  background: #f3f4f6;
}

body.light-mode .payment-help,
body.light-mode .verification-note,
body.light-mode .timeout-help {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid #3b82f6;
}

body.light-mode .email-address {
  background: #f3f4f6;
}

body.light-mode .payment-method {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

body.light-mode .payment-method:hover {
  border-color: var(--primary);
  background: rgba(138, 43, 226, 0.05);
}
/* Mobile-Specific Optimizations */
@media (max-width: 480px) {
  .header {
      padding: 0.5rem 1rem;
      flex-wrap: wrap;
  }
  
  .logo h1 {
      font-size: 1.2rem;
  }
  
  .nav {
      order: 3;
      width: 100%;
      justify-content: space-between;
      margin-top: 0.5rem;
  }
  
  .nav-btn {
      padding: 0.4rem 0.8rem;
      font-size: 0.8rem;
  }
  
  .user-actions {
      gap: 0.5rem;
  }
  
  .btn-premium {
      padding: 0.4rem 0.8rem;
      font-size: 0.8rem;
  }
  
  .main-content {
      padding: 0.5rem;
  }
  
  .chat-container {
      height: 60vh;
  }
  
  .message {
      max-width: 95%;
  }
  
  .quick-responses {
      justify-content: center;
      gap: 0.25rem;
  }
  
  .quick-response {
      padding: 0.4rem 0.8rem;
      font-size: 0.75rem;
  }
  
  .techniques-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
  }
  
  /* Payment modal mobile fixes */
  .modal-content {
      width: 95%;
      margin: 5% auto;
  }
  
  .pricing-options {
      grid-template-columns: 1fr;
  }
  
  .payment-method {
      padding: 1rem;
  }
}

/* Mobile keyboard fixes */
@media (max-height: 700px) {
  .chat-container {
      height: 55vh;
  }
}

/* iPhone notch safe areas */
@supports(padding: max(0px)) {
  .header, .main-content {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
  }
}
/* Policy Pages Styles */
.policy-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--dark);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.policy-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.policy-header h2 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.policy-content {
  line-height: 1.6;
  color: var(--light);
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
}

.policy-content h1,
.policy-content h2,
.policy-content h3 {
  color: var(--primary-light);
  margin: 1.5rem 0 0.5rem 0;
}

.policy-content h1 {
  font-size: 1.8rem;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.5rem;
}

.policy-content h2 {
  font-size: 1.4rem;
}

.policy-content h3 {
  font-size: 1.2rem;
}

.policy-content p {
  margin-bottom: 1rem;
}

.policy-content ul, 
.policy-content ol {
  margin: 1rem 0 1rem 2rem;
}

.policy-content li {
  margin-bottom: 0.5rem;
}

.policy-content strong {
  color: var(--primary-light);
}

.policy-content em {
  color: var(--gray);
}

.policy-content a {
  color: var(--secondary);
  text-decoration: none;
}

.policy-content a:hover {
  text-decoration: underline;
}

.policy-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.policy-content th,
.policy-content td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  text-align: left;
}

.policy-content th {
  background: rgba(138, 43, 226, 0.1);
  color: var(--primary-light);
  font-weight: 600;
}

/* Footer Styles */
.app-footer {
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 2rem;
  margin-top: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  color: var(--gray);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  cursor: pointer;
}

.footer-links a:hover {
  color: var(--primary);
}

/* Light mode support */
body.light-mode .policy-container {
  background: white;
  border: 1px solid #e5e7eb;
}

body.light-mode .policy-content {
  color: #374151;
}

body.light-mode .policy-content th {
  background: rgba(138, 43, 226, 0.05);
}

body.light-mode .policy-content th,
body.light-mode .policy-content td {
  border-color: #e5e7eb;
}

body.light-mode .app-footer {
  background: white;
  border-top: 1px solid #e5e7eb;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .policy-container {
      padding: 1rem;
      margin: 0.5rem;
  }
  
  .policy-content h1 {
      font-size: 1.5rem;
  }
  
  .policy-content h2 {
      font-size: 1.3rem;
  }
  
  .policy-content table {
      font-size: 0.9rem;
  }
  
  .policy-content th,
  .policy-content td {
      padding: 0.5rem;
  }
  
  .footer-content {
      flex-direction: column;
      gap: 1rem;
      text-align: center;
  }
  
  .footer-links {
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
  }
}
/* Payment Security Info */
.payment-security-info {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--success);
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
}

.payment-security-info p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.payment-security-info i {
  color: var(--success);
  margin-right: 0.5rem;
}

body.light-mode .payment-security-info {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid #10b981;
}

/* Loading Spinner for Verification */
.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid var(--primary);
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin-right: 0.5rem;
}

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

/* Policy Container Improvements */
.policy-container {
  max-height: 70vh;
  overflow-y: auto;
}

.policy-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
  line-height: 1.6;
}

/* Mobile improvements for payment modals */
@media (max-width: 768px) {
  .payment-verification .verification-steps {
      gap: 1rem;
  }
  
  .verification-step {
      padding: 1rem;
  }
  
  .manual-step {
      padding: 1rem;
  }
  
  .policy-container {
      margin: 0.5rem;
      padding: 1rem;
  }
}
/* Landing Hero Styles */
.landing-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    display: none; /* Hidden by default, shown to non-logged in users */
}

.landing-hero.show {
    display: block;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.landing-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.6;
}

.hero-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.feature {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 15px;
    min-width: 200px;
    text-align: center;
}

.feature i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.hero-pricing {
    font-size: 1.3rem;
    margin: 30px 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    display: inline-block;
}

.hero-cta {
    background: white;
    color: #667eea;
    border: none;
    padding: 18px 40px;
    font-size: 1.2rem;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    margin: 20px 0;
    transition: transform 0.3s;
}

.hero-cta:hover {
    transform: translateY(-3px);
}

.hero-cta i {
    margin-right: 10px;
}

.hero-disclaimer {
    font-size: 0.85rem;
    margin-top: 30px;
    opacity: 0.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.hero-disclaimer i {
    margin-right: 8px;
}
/* Extra Mobile Fixes */
@media (max-width: 480px) {
  /* Fix chat input on very small screens */
  #message-input {
      font-size: 16px !important; /* Prevents iOS zoom */
      padding: 12px 15px !important;
  }
  
  /* Fix payment modal scrolling */
  .modal-content {
      max-height: 85vh !important;
      overflow-y: auto !important;
  }
  
  /* Fix hero section on mobile */
  .landing-hero h1 {
      font-size: 2rem !important;
  }
  
  .hero-features {
      flex-direction: column !important;
      align-items: center !important;
  }
  
  .feature {
      width: 90% !important;
      margin-bottom: 15px !important;
  }
  
  /* Fix nav buttons on small screens */
  .nav {
      overflow-x: auto !important;
      white-space: nowrap !important;
      padding-bottom: 5px !important;
  }
  
  .nav-btn {
      padding: 8px 12px !important;
      font-size: 14px !important;
  }
}

/* Fix for iOS input styling */
input, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Prevent blue highlight on tap (iOS) */
* {
  -webkit-tap-highlight-color: transparent;
}
/* =================== */
/* OPTIMAL CHAT SIZE FOR DESKTOP */
/* =================== */

/* For desktop screens (1024px and up) */
@media (min-width: 1024px) {
  /* Slightly taller chat container - NOT TOO BIG */
  .chat-container {
      height: 75vh !important; /* Just 5vh more than original 70vh */
      max-height: 75vh !important;
  }
  
  /* Make chat messages area visible with good proportions */
  .chat-messages {
      height: calc(75vh - 200px) !important; /* Leaves room for input */
      min-height: 55vh !important;
      max-height: 55vh !important;
      padding: 1.5rem !important;
  }
  
  /* Make messages slightly wider but not too much */
  .message {
      max-width: 82% !important; /* Small increase from 80% */
  }
  
  /* Better message padding for readability */
  .message-content {
      padding: 1.2rem 1.8rem !important;
      font-size: 1.03rem !important;
      line-height: 1.6 !important;
  }
  
  /* Input area - keep visible */
  .chat-input-container {
      padding: 1.5rem !important;
      height: auto !important;
      min-height: 140px !important;
  }
  
  /* Input field - comfortable but not huge */
  #message-input {
      padding: 1rem 1.8rem !important;
      font-size: 1.05rem !important;
      border-radius: 2rem !important;
      height: 56px !important;
  }
  
  /* Send button - proportional */
  #send-btn {
      width: 56px !important;
      height: 56px !important;
  }
  
  /* Quick responses - subtle increase */
  .quick-response {
      padding: 0.6rem 1.2rem !important;
      font-size: 0.95rem !important;
      border-radius: 1.2rem !important;
      margin: 0.25rem !important;
  }
  
  /* Good spacing between messages */
  .chat-messages {
      gap: 1.2rem !important;
  }
  
  /* Make sure typing area is always visible */
  .chat-input-container {
      position: relative !important;
      bottom: 0 !important;
      background: var(--dark) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* For larger desktop screens (1280px and up) */
@media (min-width: 1280px) {
  .chat-container {
      height: 78vh !important;
  }
  
  .chat-messages {
      height: calc(78vh - 200px) !important;
      min-height: 58vh !important;
      max-height: 58vh !important;
  }
  
  .message {
      max-width: 84% !important;
  }
}

/* For extra large screens (1920px and up) */
@media (min-width: 1920px) {
  .chat-container {
      height: 80vh !important; /* Max 80vh even on huge screens */
  }
  
  /* =================== */
/* FIXED CHAT SIZE - WORKS WITH SEND BUTTON */
/* =================== */

/* For desktop screens (1024px and up) */
@media (min-width: 1024px) {
  /* Just increase overall container height */
  .chat-container {
      height: 78vh !important; /* Increased from 70vh */
      max-height: 78vh !important;
  }
  
  /* DON'T set height on chat-messages - let it flow naturally */
  .chat-messages {
      /* Remove any height calculations */
      flex: 1 !important; /* Let it take available space */
      overflow-y: auto !important;
      padding: 1.5rem !important;
  }
  
  /* Keep input container at bottom */
  .chat-input-container {
      padding: 1.5rem !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
      background: var(--dark) !important;
      flex-shrink: 0 !important; /* Don't shrink */
  }
  
  /* Slightly better message width */
  .message {
      max-width: 82% !important;
  }
  
  /* Better message padding */
  .message-content {
      padding: 1.2rem 1.8rem !important;
      font-size: 1.03rem !important;
      line-height: 1.6 !important;
  }
  
  /* Input field improvements */
  #message-input {
      padding: 1rem 1.8rem !important;
      font-size: 1.05rem !important;
      border-radius: 2rem !important;
  }
  
  /* Quick responses */
  .quick-response {
      padding: 0.6rem 1.2rem !important;
      font-size: 0.95rem !important;
  }
}

/* For larger screens */
@media (min-width: 1280px) {
  .chat-container {
      height: 80vh !important;
  }
}
  
  .message {
      max-width: 75% !important; /* Keep readable width */
  }
}

/* Ensure typing area never gets hidden */
@media (min-width: 1024px) {
  .chat-input-container {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      min-height: 140px !important;
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
  }
  
  .input-wrapper {
      margin-bottom: 0.75rem !important;
  }
  
  .quick-responses {
      margin-top: 0.75rem !important;
      padding-top: 0.75rem !important;
      border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
}

/* Light mode adjustments */
@media (min-width: 1024px) {
  body.light-mode .chat-input-container {
      background: var(--dark) !important;
      border-top: 1px solid #e5e7eb !important;
  }
  
  body.light-mode .quick-responses {
      border-top: 1px solid #e5e7eb !important;
  }
}
/* Minimal balanced chat size */
@media (min-width: 1024px) {
  .chat-container {
      height: 75vh !important; /* Slightly bigger */
  }
  
  .chat-messages {
      height: 55vh !important; /* Leaves room for input */
      padding: 1.5rem !important;
  }
  
  .chat-input-container {
      min-height: 140px !important; /* Ensures typing area stays visible */
      padding: 1.5rem !important;
  }
  
  #message-input {
      padding: 1rem 1.5rem !important;
      height: 56px !important;
  }
}
/* EMERGENCY FIX: Ensure typing area always shows */
.chat-container {
  display: flex !important;
  flex-direction: column !important;
}

.chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
}

.chat-input-container {
  flex-shrink: 0 !important; /* Prevents shrinking */
  position: sticky !important;
  bottom: 0 !important;
  background: var(--dark) !important;
  z-index: 10 !important;
}
/* =================== */
/* MOOD CHECK-IN SYSTEM */
/* =================== */

/* Fix mood modal scrolling */
.mood-modal .modal-content {
  max-width: 500px;
  max-height: 85vh; /* Limit height */
  overflow: hidden; /* Prevent double scroll */
  display: flex;
  flex-direction: column;
}

.mood-modal .modal-body {
  flex: 1;
  overflow-y: auto; /* Make body scrollable */
  max-height: 60vh; /* Limit body height */
  padding: 1.5rem;
}

/* Make mood selector more compact */
.mood-selector {
  display: flex;
  justify-content: center;
  gap: 0.75rem; /* Reduced from 1.5rem */
  margin: 1.5rem 0; /* Reduced from 2rem */
  flex-wrap: wrap;
}

.mood-option {
  width: 70px; /* Reduced from 80px */
  padding: 0.75rem; /* Reduced from 1rem */
}

.mood-emoji {
  font-size: 2rem; /* Reduced from 2.5rem */
  margin-bottom: 0.25rem; /* Reduced from 0.5rem */
}

.mood-label {
  font-size: 0.8rem; /* Reduced from 0.9rem */
}

/* Make description area scrollable if needed */
.mood-description {
  max-height: 100px;
  overflow-y: auto;
  margin: 1rem 0; /* Reduced from 1.5rem */
}

/* Add close button to modal header */
.mood-modal .modal-header {
  position: relative;
}

.mood-modal .close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
}

.mood-modal .close-modal:hover {
  color: white;
}

/* Auto-progress indicator */
.auto-progress-indicator {
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1.5px;
  margin: 0.5rem 0;
  overflow: hidden;
}

.auto-progress-bar {
  height: 100%;
  background: white;
  width: 0%;
  border-radius: 1.5px;
  transition: width 1.5s linear;
}

.mood-option.selected ~ .auto-progress-indicator .auto-progress-bar {
  width: 100%;
}

.mood-emoji {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  transition: all 0.5s ease;
}

.mood-option[data-mood="great"] .mood-emoji {
  animation: sparkle 2s infinite;
}

.mood-option[data-mood="good"] .mood-emoji {
  animation: bounce 3s infinite;
}

.mood-option[data-mood="okay"] .mood-emoji {
  animation: gentleBounce 4s infinite;
}

.mood-option[data-mood="neutral"] .mood-emoji {
  animation: float 5s infinite;
}

.mood-option[data-mood="heavy"] .mood-emoji {
  animation: pulse 3s infinite;
}

.mood-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.mood-description {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  min-height: 60px;
  transition: all 0.3s ease;
}

.btn-continue {
  width: 100%;
  background: white;
  color: #667eea;
  border: none;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.btn-continue:enabled {
  opacity: 1;
}

.btn-continue:enabled:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.mood-note {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1rem;
}

/* Mood Animations */
@keyframes sparkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
  0% { filter: drop-shadow(0 0 5px gold); }
  50% { filter: drop-shadow(0 0 10px gold); }
  100% { filter: drop-shadow(0 0 5px gold); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

/* Ripple effect for mood selection */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
      transform: scale(4);
      opacity: 0;
  }
}

/* =================== */
/* DAILY GROWTH GARDEN */
/* =================== */

.garden-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  padding: 1.5rem;
  color: white;
  min-height: 500px;
}

.garden-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.garden-header h2 {
  color: white;
  font-size: 1.8rem;
}

.garden-stats {
  display: flex;
  gap: 2rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 0.75rem;
}

.garden-stat {
  text-align: center;
}

.garden-stat .stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
}

.garden-stat .stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.garden-canvas {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 2rem;
  min-height: 300px;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.empty-garden {
  text-align: center;
  padding: 3rem;
}

.empty-garden-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.empty-garden h3 {
  color: white;
  margin-bottom: 0.5rem;
}

.empty-garden p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}

.btn-check-in {
  background: white;
  color: #667eea;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-check-in:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Plant animations */
.plant {
  position: absolute;
  transition: all 1s ease;
  cursor: pointer;
}

.plant:hover {
  transform: scale(1.1) !important;
  z-index: 10;
}

.seed {
  font-size: 1.5rem;
  animation: seedGlow 2s infinite;
}

.seedling {
  font-size: 2rem;
  animation: grow 3s ease;
}

.mature-plant {
  font-size: 3rem;
  animation: sway 5s infinite ease-in-out;
}

@keyframes seedGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes grow {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.garden-legend {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.garden-legend h3 {
  color: white;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.legend-icon {
  font-size: 1.5rem;
}

.legend-item span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.garden-achievements {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.garden-achievements h3 {
  color: white;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.achievement {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.achievement:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
}

.achievement-icon {
  font-size: 1.5rem;
}

.achievement-details h4 {
  color: white;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.achievement-details p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.achievement-date {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

/* =================== */
/* EMOTIONAL WEATHER WIDGET */
/* =================== */

.weather-widget {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  padding: 1.5rem;
  color: white;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.weather-header h3 {
  color: white;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.weather-info-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.weather-info-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.weather-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.weather-icon {
  font-size: 3.5rem;
  animation: weatherFloat 6s infinite ease-in-out;
}

@keyframes weatherFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.weather-details {
  flex: 1;
}

.weather-condition {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.weather-temperature {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.weather-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.weather-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.weather-particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

.rain-particle {
  background: rgba(255, 255, 255, 0.5);
  animation: rainFall 1s linear infinite;
}

.sun-ray {
  position: absolute;
  background: linear-gradient(to right, 
      transparent 0%, 
      rgba(255, 255, 255, 0.3) 50%, 
      transparent 100%);
  animation: rayRotate 10s linear infinite;
}

@keyframes rainFall {
  0% {
      transform: translateY(-100px);
      opacity: 0;
  }
  10% {
      opacity: 1;
  }
  90% {
      opacity: 1;
  }
  100% {
      transform: translateY(100px);
      opacity: 0;
  }
}

@keyframes rayRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.weather-forecast {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 0.75rem;
}

.forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.forecast-day span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.forecast-icon {
  font-size: 1.5rem;
  animation: forecastBounce 3s infinite;
}

@keyframes forecastBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* =================== */
/* ENHANCED CHAT BUBBLES */
/* =================== */

.message {
  animation: messageAppear 0.4s ease-out;
}

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

.user-message .message-content {
  animation: userMessageAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes userMessageAppear {
  from {
      opacity: 0;
      transform: translateX(20px) scale(0.9);
  }
  to {
      opacity: 1;
      transform: translateX(0) scale(1);
  }
}

.ai-message .message-content {
  animation: aiMessageAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes aiMessageAppear {
  from {
      opacity: 0;
      transform: translateX(-20px) scale(0.9);
  }
  to {
      opacity: 1;
      transform: translateX(0) scale(1);
  }
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0.6;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes typingBounce {
  0%, 80%, 100% { 
      transform: scale(0.8);
      opacity: 0.6;
  }
  40% { 
      transform: scale(1.2);
      opacity: 1;
  }
}

/* =================== */
/* RESPONSIVE DESIGN */
/* =================== */

@media (max-width: 768px) {
  .mood-selector {
      gap: 1rem;
  }
  
  .mood-option {
      width: 70px;
      padding: 0.75rem;
  }
  
  .mood-emoji {
      font-size: 2rem;
  }
  
  .garden-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
  }
  
  .garden-stats {
      width: 100%;
      justify-content: space-between;
  }
  
  .weather-content {
      flex-direction: column;
      text-align: center;
  }
  
  .legend-items {
      flex-direction: column;
      gap: 1rem;
  }
}

@media (max-width: 480px) {
  .mood-selector {
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .mood-option {
      width: 60px;
  }
  
  .weather-forecast {
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
  }
  
  .forecast-day {
      min-width: 60px;
  }
}
/* Add to existing CSS */
.install-prompt {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  max-width: 300px;
  animation: slideInUp 0.3s ease;
}

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

.install-prompt-content p {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
}

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

.btn-install {
  flex: 1;
  background: white;
  color: #667eea;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn-later {
  flex: 1;
  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

/* Enhanced chat bubble animations */
.message-enter {
  animation: messageEnter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes messageEnter {
  from {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
  }
  to {
      opacity: 1;
      transform: translateY(0) scale(1);
  }
}

/* Mood-based background gradients */
body.mood-great {
  background: linear-gradient(135deg, #ffd70010 0%, #764ba2 100%);
}

body.mood-good {
  background: linear-gradient(135deg, #ff980010 0%, #764ba2 100%);
}

body.mood-okay {
  background: linear-gradient(135deg, #00968810 0%, #764ba2 100%);
}

body.mood-neutral {
  background: linear-gradient(135deg, #2196f310 0%, #764ba2 100%);
}

body.mood-heavy {
  background: linear-gradient(135deg, #673ab710 0%, #764ba2 100%);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
  }
}
/* =================== */
/* COMPLETE SYSTEM ENHANCEMENTS */
/* =================== */

/* Variable for reduced motion */
:root {
  --animation-speed: 1s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
      --animation-speed: 0.01ms;
  }
}

/* Apply animation speed variable */
* {
  animation-duration: var(--animation-speed, 1s) !important;
  transition-duration: var(--animation-speed, 1s) !important;
}

/* Export Modal */
.export-modal {
  max-width: 400px;
}

.export-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.export-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.export-option:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.export-option i {
  font-size: 1.5rem;
  color: var(--primary);
}

.export-info h4 {
  margin: 0 0 0.25rem 0;
}

.export-info p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Achievement Badges */
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 193, 7, 0.2);
  border: 2px solid #FFC107;
  color: #FFC107;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.25rem;
}

.achievement-badge i {
  font-size: 1rem;
}

/* Progress Rings */
.progress-ring {
  width: 80px;
  height: 80px;
}

.progress-ring-circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.progress-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 6;
}

.progress-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

/* Notification Badge */
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #FF5252;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--gray);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.empty-state h3 {
  margin-bottom: 0.5rem;
  color: var(--light);
}

.empty-state p {
  margin-bottom: 1.5rem;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 30, 46, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: white;
}

.loading-spinner-large {
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

/* Connection Status */
.connection-status {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 100;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  animation: pulse 2s infinite;
}

.connection-dot.offline {
  background: #FF5252;
}

/* Keyboard Shortcuts */
.keyboard-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-family: monospace;
}

/* Tooltips */
.tooltip {
  position: relative;
}

.tooltip-text {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.tooltip:hover .tooltip-text {
  opacity: 1;
}

/* Print Styles */
@media print {
  .header, .nav, .user-actions, 
  .chat-input-container, .modal,
  .sos-button, .btn-premium {
      display: none !important;
  }
  
  .chat-container {
      height: auto !important;
      border: none !important;
      box-shadow: none !important;
  }
  
  .chat-messages {
      height: auto !important;
      overflow: visible !important;
  }
  
  body {
      background: white !important;
      color: black !important;
  }
  
  .message-content {
      background: white !important;
      color: black !important;
      border: 1px solid #ddd !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
      --primary: #0000FF;
      --secondary: #FF0000;
      --dark: #000000;
      --light: #FFFFFF;
  }
  
  .message-content {
      border: 2px solid currentColor;
  }
  
  button {
      border: 2px solid currentColor;
  }
}

/* Dark Mode Refinements */
body.light-mode .sos-button {
  background: linear-gradient(135deg, #FF5252 0%, #FF4081 100%);
  color: white;
}

body.light-mode .achievement-badge {
  background: rgba(255, 193, 7, 0.1);
  border-color: #FF9800;
  color: #FF9800;
}

/* Focus Styles for Accessibility */
:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Reduced Motion Overrides */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .mood-option,
  .sos-option,
  .export-option {
      min-height: 44px;
      min-width: 44px;
  }
  
  .btn-purchase,
  .btn-start-ritual,
  .btn-check-in {
      min-height: 44px;
  }
  
  .quick-response {
      padding: 0.75rem 1rem;
      margin: 0.25rem;
  }
  
  .nav-btn {
      padding: 0.75rem 1rem;
  }
}

/* Performance Optimizations */
.will-change {
  will-change: transform, opacity;
}

/* Hardware Acceleration */
.hardware-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Final System Status Indicator */
.system-status {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4CAF50;
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* =================== */
/* ADDITIONAL CHAT FIXES - ADD THESE */
/* =================== */

/* Make messages wrap properly */
.message-content {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.message-content p {
  margin: 0 !important;
  line-height: 1.6 !important;
  word-break: break-word !important;
}

/* Fix message width for better readability */
.message {
  max-width: 85% !important;
  min-width: 200px;
}

.ai-message {
  max-width: 90% !important;
}

/* Ensure input area stays visible */
.chat-input-container {
  flex-shrink: 0 !important;
  min-height: 140px !important;
  padding: 1.5rem !important;
  background: var(--dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.input-wrapper {
  margin-bottom: 1rem !important;
}

#message-input {
  min-height: 50px !important;
  max-height: 100px !important;
  line-height: 1.5 !important;
  padding: 12px 20px !important;
  font-size: 1rem !important;
}

/* Fix quick responses */
.quick-responses {
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  max-height: 60px !important;
  overflow-y: auto !important;
}

.quick-response {
  white-space: nowrap !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 0.8rem !important;
}

/* Scrollbar styling for chat */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

/* Mobile chat fixes */
@media (max-width: 768px) {
  .chat-container {
    height: 70vh !important;
    min-height: 400px;
  }
  
  .chat-messages {
    max-height: calc(70vh - 160px) !important;
    padding: 1rem !important;
  }
  
  .message {
    max-width: 92% !important;
  }
  
  .chat-input-container {
    min-height: 120px !important;
    padding: 1rem !important;
  }
}

/* Emergency fix for overflowing content */
.message-content * {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Fix technique suggestions */
.technique-suggestion {
  max-width: 100% !important;
  overflow: hidden !important;
}

.technique-suggestion h4 {
  word-break: break-word !important;
}

/* Make sure lists don't overflow */
.message-content ul,
.message-content ol {
  padding-left: 1.5rem !important;
  margin: 0.5rem 0 !important;
}

.message-content li {
  margin-bottom: 0.25rem !important;
  word-break: break-word !important;
}