/* SnapCopy - Common Styles */

:root {
  --bg-color: #ffffff;
  --text-color: #212529;
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --table-bg: #ffffff;
  --table-border: #dee2e6;
  --table-striped-bg: #f2f2f2;
  --table-hover-bg: #e9ecef;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-text: #212529;
  --hero-bg: linear-gradient(135deg, #6e8efb, #a777e3);
  --hero-text: #ffffff;
  --empty-state-bg: #f8f9fa;
  --empty-state-text: #6c757d;
  --detail-container-bg: #f8f9fa;
  --detail-container-border: #dee2e6;
}

.dark-mode {
  --bg-color: #121212;
  --text-color: #e9ecef;
  --card-bg: #1e1e1e;
  --card-border: #444;
  --table-bg: #1e1e1e;
  --table-border: #444;
  --table-striped-bg: #2a2a2a;
  --table-hover-bg: #333;
  --input-bg: #2a2a2a;
  --input-border: #555;
  --input-text: #e9ecef;
  --hero-bg: linear-gradient(135deg, #2a2a2a, #444);
  --hero-text: #e9ecef;
  --empty-state-bg: #2a2a2a;
  --empty-state-text: #adb5bd;
  --detail-container-bg: #2a2a2a;
  --detail-container-border: #444;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.hero-section {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.copy-card, .pricing-card, .checkout-card {
  transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
  margin-bottom: 1.5rem;
  background-color: var(--card-bg);
  border-color: var(--card-border);
}
.copy-card:hover, .pricing-card:hover, .checkout-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.table {
  background-color: var(--table-bg);
  border-color: var(--table-border);
  color: var(--text-color);
}
.table-hover tbody tr:hover { background-color: var(--table-hover-bg); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--table-striped-bg); }
.table thead th { background-color: var(--table-striped-bg); border-color: var(--table-border); }
.table td, .table th { border-color: var(--table-border); }

.form-control, .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.input-group-text {
  background-color: var(--table-striped-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  background-color: var(--empty-state-bg);
  color: var(--empty-state-text);
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.dark-mode-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}


/* ========================================
   Message Card Styles (Updated UI)
   ======================================== */

/* Message list container */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Individual message card */
.message-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.message-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #0d6efd;
}

/* Message card header (clickable area) */
.message-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: linear-gradient(to right, #f8f9fa, #ffffff);
  transition: background 0.2s ease;
}

.message-card-header:hover {
  background: linear-gradient(to right, #e9ecef, #f8f9fa);
}

/* Message preview text */
.message-card-preview {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.message-preview-text {
  font-size: 0.95rem;
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Message card actions (right side) */
.message-card-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Time badge in header */
.message-time-badge {
  font-size: 0.75rem;
  color: #6c757d;
  background: #e9ecef;
  padding: 0.25rem 0.625rem;
  border-radius: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Expand button */
.expand-message-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  border: 1px solid #dee2e6;
  background: #fff;
}

.expand-message-btn:hover {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.expand-message-btn i {
  transition: transform 0.2s ease;
}

/* Message card details (expanded view) */
.message-card-details {
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  padding: 1.25rem;
}

/* Message content section */
.message-content-section {
  margin-bottom: 1.5rem;
}

.message-content-wrapper {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
}

.editable-content {
  border: none !important;
  background: #f8f9fa;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
}

.editable-content:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

/* Message meta section */
.message-meta-section {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.meta-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.meta-value {
  font-size: 0.9rem;
  color: #212529;
  word-break: break-word;
}

/* Message actions section */
.message-actions-section {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
}

/* Reveal button styling */
.reveal-btn {
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
}

/* Message placeholder (hidden content) */
.message-placeholder {
  color: #6c757d;
  font-style: italic;
}

/* Dark mode support */
.dark-mode .message-card {
  background: #2d3748;
  border-color: #4a5568;
}

.dark-mode .message-card:hover {
  border-color: #63b3ed;
}

.dark-mode .message-card-header {
  background: linear-gradient(to right, #1a202c, #2d3748);
}

.dark-mode .message-card-header:hover {
  background: linear-gradient(to right, #2d3748, #4a5568);
}

.dark-mode .message-preview-text {
  color: #e2e8f0;
}

.dark-mode .message-time-badge {
  background: #4a5568;
  color: #cbd5e0;
}

.dark-mode .expand-message-btn {
  background: #4a5568;
  border-color: #4a5568;
  color: #cbd5e0;
}

.dark-mode .expand-message-btn:hover {
  background: #63b3ed;
  border-color: #63b3ed;
  color: #fff;
}

.dark-mode .message-card-details {
  background: #1a202c;
  border-top-color: #4a5568;
}

.dark-mode .message-content-wrapper {
  background: #2d3748;
  border-color: #4a5568;
}

.dark-mode .editable-content {
  background: #1a202c;
  color: #e2e8f0;
}

.dark-mode .editable-content:focus {
  background: #2d3748;
}

.dark-mode .message-meta-section {
  background: #2d3748;
  border-color: #4a5568;
}

.dark-mode .meta-label {
  color: #a0aec0;
}

.dark-mode .meta-value {
  color: #e2e8f0;
}

.dark-mode .message-placeholder {
  color: #a0aec0;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .message-card-header {
    padding: 0.875rem 1rem;
  }
  
  .message-card-details {
    padding: 1rem;
  }
  
  .message-time-badge {
    display: none;
  }
  
  .message-preview-text {
    font-size: 0.875rem;
  }
}