/* MoneyVersations Community — compact mobile comments and nested replies.
   Mobile-only overrides. Existing desktop styles and PHP/JS handlers are untouched. */

@media (max-width: 560px) {
  /* Give the feed and comments the available phone width. */
  .page-main,
  .feed-wrap,
  .feed-list,
  .feed-post,
  .comments-area,
  .comment-list {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .page-main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .feed-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  /* Reduce the gap and padding around the comment thread. */
  .comments-area {
    padding-top: 5px;
    margin-top: 6px;
  }

  .comment-list {
    gap: 5px;
    padding-left: 0;
    padding-right: 0;
  }

  .comment-list > .mv-comment,
  .mv-comment {
    padding: 7px 8px;
    border-radius: 12px;
    min-width: 0;
  }

  .mv-comment + .mv-comment {
    margin-top: 4px;
  }

  .mv-comment .mv-item-head {
    gap: 5px;
    align-items: center;
  }

  .mv-item-head-main {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mv-comment .mv-menu summary {
    width: 27px;
    height: 27px;
    font-size: 18px;
  }

  .mv-comment-text {
    margin-top: 2px;
    line-height: 1.32;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Each reply level consumes less width; text remains inside the card. */
  .mv-comment-children {
    margin: 5px 0 0 6px;
    padding: 0 0 0 6px;
    gap: 5px;
    border-left-width: 2px;
    min-width: 0;
  }

  .mv-comment-children > .mv-comment {
    padding: 7px;
    border-radius: 10px;
    min-width: 0;
  }

  .mv-comment-tools {
    gap: 10px;
    margin-top: 4px;
    line-height: 1.25;
  }

  .mv-text-action,
  .mv-comment-like-form button {
    font-size: .88rem;
  }

  .mv-reply-context {
    margin-top: 1px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .mv-reply-to {
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .mv-reply-form {
    margin: 5px 0 0 5px;
    width: calc(100% - 5px);
    gap: 5px;
    min-width: 0;
  }

  .mv-reply-form textarea {
    min-width: 0;
    min-height: 38px;
    padding: 8px 9px;
    border-radius: 9px;
    font-size: 16px;
  }

  .mv-reply-form .mv-reply-form-actions {
    gap: 6px;
  }

  .mv-reply-form .mv-reply-form-actions button,
  .mv-reply-form button {
    max-width: 100%;
  }

  /* Avoid long words, usernames, or URLs forcing a wider layout. */
  .mv-comment *,
  .mv-comment-children *,
  .mv-reply-form * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Very narrow phones: shave a little more indentation at deep reply levels. */
@media (max-width: 380px) {
  .page-main {
    padding-left: 7px;
    padding-right: 7px;
  }

  .mv-comment-children {
    margin-left: 4px;
    padding-left: 5px;
  }

  .mv-comment,
  .mv-comment-children > .mv-comment {
    padding: 6px;
  }

  .mv-comment-tools {
    gap: 8px;
  }
}