/* ============================================
   ChatVisionZ - Video Page Phone Overrides
   Additional responsive overrides for the
   video chat page. Base responsive styles
   are in style.css.
   ============================================ */

/* Large tablet */
@media (max-width: 1366px) {
  #main {
    grid-template-columns: minmax(200px, 35%) 1fr;
  }

  .message-status {
    font-size: var(--font-size-lg);
  }

  .message {
    font-size: var(--font-size-base);
  }
}

/* Tablet: side-by-side videos on top */
@media (max-width: 768px) {
  #main {
    /* minmax for input row: at least --input-area-height, grows to fit wrapped buttons */
    grid-template-rows: var(--header-height) 36vh 1fr minmax(var(--input-area-height), auto);
    grid-template-columns: 1fr;
    grid-template-areas:
      'top'
      'vid'
      'msg'
      'inp';
  }

  #videos {
    padding: var(--space-sm);
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
  }

  #self {
    margin: 0;
    border-radius: var(--radius-sm);
  }

  #peer {
    margin: 0;
    border-radius: var(--radius-sm);
  }

  #message-area {
    padding: var(--space-sm);
    font-size: var(--font-size-base);
  }

  /* Ensure both buttons always visible on video chat mobile */
  #skip-btn,
  #send-btn {
    display: inline-flex;
  }
}

/* Small mobile: picture-in-picture self view */
@media (max-width: 550px) {
  #videos {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    position: relative;
    padding: var(--space-xs);
  }

  #self {
    position: absolute;
    z-index: 10;
    width: 28%;
    min-width: 80px;
    bottom: var(--space-sm);
    right: var(--space-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 2px solid rgba(255, 255, 255, 0.15);
  }

  #self .video-player {
    border-radius: var(--radius-md);
  }

  #peer {
    height: 100%;
  }

  #peer img#watermark {
    width: 18%;
  }

  /* Wrap input on small screens - input on top, buttons below */
  #input-area {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--input-area-height);
    overflow: visible;
  }

  #message-input {
    order: -1;
    width: 100%;
    flex: 1 1 100%;
    margin-bottom: var(--space-xs);
  }

  #skip-btn,
  #send-btn {
    flex: 1;
    min-width: 80px;
    display: inline-flex !important;
  }

  /* Emoji and game buttons sit in the button row */
  #emoji-btn,
  #game-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    min-width: 38px;
    order: 0;
  }
}

/* Extra small */
@media (max-width: 375px) {
  #self {
    width: 32%;
  }

  .message {
    font-size: var(--font-size-sm);
    margin: var(--space-xs);
  }
}