/* responsive.css – 手機版樣式優化 */

@media (max-width: 600px) {
  #main-preview img,
  .reply-preview img,
  .edit-preview img,
  .comment img {
    max-width: 100%;
    max-height: 260px;
    height: auto;
  }

  .container {
    width: 100%;
    max-width: 100%;
  }

  .header-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .header-top-row {
    display: flex;
    gap: 10px;
    width: 100%;
  }

  .header-top-row button {
    flex: 1;
    width: 100%;
    font-size: 0.95em;
    padding: 10px 14px;
  }

  .controlRow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .actions button {
    width: 100%;
    margin-right: 0 !important;
  }

  button {
    width: 100%;
    font-size: 0.95em;
    padding: 10px 14px;
  }

  /* ✅ 統一 form 裡 Send / Upload 按鈕寬度 & 外觀 + 高度 */
  #main-form > div {
    display: flex;
    gap: 10px;
  }

  #main-form button {
    flex: 1;
    width: 100%;
    font-size: 0.95em;
    padding: 10px 14px;
    height: 44px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
  }

  textarea {
    font-size: 0.95em;
  }

  .popup-box,
  .confirm-box {
    width: 90%;
    max-width: 100%;
    font-size: 0.95em;
  }

  #toast {
    font-size: 0.85em;
  }
}

/* ✅ 手機版 header 順序調整（可保留） */
@media (max-width: 600px) {
  .header-container > div:nth-child(1) { order: 1; }
  .header-container > div:nth-child(3) { order: 2; }
  .header-container > div:nth-child(2) { order: 3; }
}

/* ✅ 手機版 .reply-box 垂直排版設定 */
@media (max-width: 600px) {
  .reply-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .reply-box button {
    width: 100%;
    font-size: 0.95em;
    padding: 10px 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
  }

  .reply-box textarea {
    font-size: 0.95em;
  }
}

/* ✅ 手機版 .edit-box 垂直排版設定 */
@media (max-width: 600px) {
  .edit-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .edit-box button {
    width: 100%;
    font-size: 0.95em;
    padding: 10px 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
  }

  .edit-box textarea {
    font-size: 0.95em;
  }
}