/* You View */
#view-you {
  gap: var(--space-3);
}

/* Data Section */
.data-section {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.data-section h3 {
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.data-actions {
  display: flex;
  gap: var(--space-2);
}

.data-actions .btn-secondary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.btn-icon {
  font-size: 1rem;
}

.data-hint {
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-top: var(--space-2);
  text-align: center;
}

.import-success {
  color: var(--accent-body);
}

.import-error {
  color: var(--accent-connection);
}

/* Identity Section */
.identity-section {
  text-align: center;
}

.identity-section h2 {
  font-weight: var(--font-light);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#identity-statement {
  font-size: 1.125rem;
  line-height: 1.7;
  min-height: 100px;
  text-align: center;
  background-color: transparent;
  border: none;
  resize: none;
}

#identity-statement:focus {
  border: none;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
}

/* Letters Section */
.letters-section,
.past-messages-section,
.decisions-section {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.letters-section h3,
.past-messages-section h3,
.decisions-section h3 {
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

#new-letter-btn,
#new-decision-btn {
  width: 100%;
  margin-bottom: var(--space-2);
}

/* Letters List */
.letters-list,
.past-messages-list,
.decisions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.letter-item,
.past-message-item,
.decision-item {
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.letter-item-date,
.past-message-date,
.decision-date {
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-bottom: var(--space-1);
}

.letter-item-preview,
.past-message-text,
.decision-title {
  font-size: 0.875rem;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.letter-item-reveal {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Past Message - special styling for revealed letters */
.past-message-item {
  border-left: 3px solid var(--accent-clarity);
}

.past-message-text {
  -webkit-line-clamp: 4;
  white-space: pre-wrap;
}

/* Decision Item */
.decision-item {
  cursor: pointer;
}

.decision-item:hover {
  background-color: var(--bg-primary);
}

.decision-context {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-3);
  color: var(--text-subtle);
  font-size: 0.875rem;
  font-style: italic;
}

/* Notification Badge */
.notification-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--accent-clarity);
  color: var(--bg-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
}

.notification-badge::before {
  content: '✉️';
}

/* Editable Items */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.item-delete-btn {
  font-size: 1.25rem;
  color: var(--text-subtle);
  padding: 0 4px;
  opacity: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.letter-item:hover .item-delete-btn,
.decision-item:hover .item-delete-btn {
  opacity: 1;
}

.item-delete-btn:hover {
  color: var(--accent-connection);
}

.editable-text {
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--radius-sm);
}

.editable-text:hover {
  background-color: var(--bg-primary);
}

.editable-text.placeholder {
  color: var(--text-subtle);
  font-style: italic;
}

.edit-input {
  width: 100%;
  font-size: 0.875rem;
  margin-bottom: var(--space-1);
}

.edit-textarea {
  width: 100%;
  min-height: 80px;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
}

.letter-item .edit-textarea {
  min-height: 100px;
}

.letter-item-preview {
  -webkit-line-clamp: unset;
  white-space: pre-wrap;
}

/* Notion Sync Section */
.notion-sync-section {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.notion-sync-section h3 {
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.notion-token-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.notion-token-row input {
  flex: 1;
  font-size: 0.875rem;
}

.notion-token-row button {
  flex-shrink: 0;
}

.sync-status {
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  display: none;
}

.sync-status.visible {
  display: block;
}

.sync-status.success {
  background-color: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}

.sync-status.error {
  background-color: rgba(244, 67, 54, 0.15);
  color: #f44336;
}

.sync-status.loading {
  background-color: rgba(33, 150, 243, 0.15);
  color: #2196f3;
}

.sync-actions {
  display: flex;
  gap: var(--space-2);
}

.sync-actions .btn-secondary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.sync-actions .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#api-key-row {
  display: none;
}

.sync-hint {
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-top: var(--space-2);
  text-align: center;
}

.sync-hint code {
  background-color: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 0.7rem;
}

/* =============================================
   RESPONSIVE / MOBILE STYLES - YOU VIEW
   ============================================= */

/* Touch device detection - always show delete buttons */
@media (hover: none) and (pointer: coarse) {
  .item-delete-btn {
    opacity: 0.6;
  }

  .letter-item .item-delete-btn,
  .decision-item .item-delete-btn {
    opacity: 0.6;
  }

  /* Larger touch targets */
  .item-delete-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Decision item tap feedback */
  .decision-item:active {
    background-color: var(--bg-primary);
  }
}

/* Tablet breakpoint */
@media (max-width: 768px) {
  .data-section,
  .letters-section,
  .past-messages-section,
  .decisions-section,
  .notion-sync-section {
    padding: var(--space-2);
  }

  #identity-statement {
    font-size: 1rem;
    min-height: 80px;
  }

  .data-actions {
    flex-wrap: wrap;
  }
}

/* Phone breakpoint */
@media (max-width: 480px) {
  #view-you {
    gap: var(--space-2);
  }

  /* Section padding */
  .data-section,
  .letters-section,
  .past-messages-section,
  .decisions-section,
  .notion-sync-section {
    padding: var(--space-2);
  }

  .data-section h3,
  .letters-section h3,
  .past-messages-section h3,
  .decisions-section h3,
  .notion-sync-section h3 {
    font-size: 0.8125rem;
    margin-bottom: var(--space-1);
  }

  /* Data actions - full width buttons */
  .data-actions {
    flex-direction: column;
    gap: var(--space-1);
  }

  .data-actions .btn-secondary {
    min-height: 44px;
    justify-content: center;
  }

  .btn-icon {
    font-size: 1.125rem;
  }

  .data-hint {
    font-size: 0.6875rem;
  }

  /* Identity section */
  .identity-section h2 {
    font-size: 0.8125rem;
  }

  #identity-statement {
    font-size: 16px; /* Prevents iOS zoom */
    line-height: 1.6;
    min-height: 80px;
    padding: var(--space-2);
  }

  /* Letters and decisions */
  #new-letter-btn,
  #new-decision-btn {
    min-height: 44px;
    margin-bottom: var(--space-1);
  }

  .letters-list,
  .past-messages-list,
  .decisions-list {
    gap: var(--space-1);
  }

  .letter-item,
  .past-message-item,
  .decision-item {
    padding: var(--space-2);
  }

  .letter-item-date,
  .past-message-date,
  .decision-date {
    font-size: 0.6875rem;
  }

  .letter-item-preview,
  .past-message-text,
  .decision-title {
    font-size: 0.8125rem;
  }

  .decision-context {
    font-size: 0.75rem;
  }

  .letter-item-reveal {
    font-size: 0.6875rem;
  }

  /* Delete buttons always visible */
  .letter-item .item-delete-btn,
  .decision-item .item-delete-btn {
    opacity: 0.7;
    min-width: 44px;
    min-height: 44px;
  }

  /* Edit inputs */
  .edit-input,
  .edit-textarea {
    font-size: 16px; /* Prevents iOS zoom */
    padding: var(--space-2);
  }

  .edit-textarea {
    min-height: 80px;
  }

  .letter-item .edit-textarea {
    min-height: 100px;
  }

  /* Notification badge */
  .notification-badge {
    font-size: 0.6875rem;
    padding: var(--space-1);
  }

  /* Empty state */
  .empty-state {
    padding: var(--space-2);
    font-size: 0.8125rem;
  }

  /* Notion sync */
  .notion-token-row {
    flex-direction: column;
    gap: var(--space-1);
  }

  .notion-token-row input {
    font-size: 16px; /* Prevents iOS zoom */
    min-height: 44px;
  }

  .notion-token-row button {
    min-height: 44px;
    width: 100%;
  }

  .sync-status {
    font-size: 0.75rem;
    padding: var(--space-1);
  }

  .sync-actions {
    flex-direction: column;
    gap: var(--space-1);
  }

  .sync-actions .btn-secondary {
    min-height: 44px;
  }

  .sync-hint {
    font-size: 0.6875rem;
  }

  .sync-hint code {
    font-size: 0.625rem;
  }
}

/* Small phone breakpoint */
@media (max-width: 320px) {
  .data-section,
  .letters-section,
  .past-messages-section,
  .decisions-section,
  .notion-sync-section {
    padding: var(--space-1) var(--space-2);
  }

  .data-section h3,
  .letters-section h3,
  .past-messages-section h3,
  .decisions-section h3,
  .notion-sync-section h3 {
    font-size: 0.75rem;
  }

  #identity-statement {
    min-height: 60px;
  }

  .letter-item-preview,
  .past-message-text,
  .decision-title {
    font-size: 0.75rem;
  }

  .letter-item .item-delete-btn,
  .decision-item .item-delete-btn {
    min-width: 40px;
    min-height: 40px;
  }
}