/* ============================================
   ChatVisionZ - Extra Small Screen Overrides
   For screens 375px and below (iPhone SE, etc.)
   ============================================ */

@media (max-width: 375px) {
  /* Reduce base sizing */
  :root {
    --header-height: 48px;
    --input-area-height: 56px;
  }

  /* Compact top bar */
  #top-bar {
    padding: var(--space-xs) var(--space-sm);
  }

  #peopleOnline p {
    font-size: var(--font-size-xs);
    padding: 2px var(--space-xs);
  }

  /* Landing page */
  #content {
    border: none;
  }

  #social-message {
    padding: var(--space-sm);
  }

  #message-content {
    font-size: var(--font-size-sm);
  }

  #instructions p {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }

  #interest-container input {
    width: 95%;
    font-size: var(--font-size-sm);
  }

  #tag-container {
    width: 95%;
    max-width: 95%;
  }

  #button-container button {
    font-size: var(--font-size-sm);
    padding: 12px var(--space-lg);
  }

  /* Chat/Video page */
  #skip-btn {
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--font-size-sm);
  }

  #message-input {
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-size-sm);
  }

  /* Modal */
  .modal-content {
    width: 95%;
    padding: var(--space-md);
    margin: 3% auto;
  }

  .modal-content h2 {
    font-size: var(--font-size-lg);
  }

  /* Self video overlay - consistent with phone.css 375px */
  #self {
    width: 32%;
  }
}