/* 响应式设计 - 手机和平板优化 */

/* 平板 */
@media (max-width: 768px) {
  .glass-panel {
    padding: 24px;
    max-width: 100%;
  }

  h1 {
    font-size: clamp(24px, 6vmin, 36px);
  }

  .subtitle {
    font-size: 15px;
  }

  .page {
    padding: 16px;
  }

  .message-form {
    padding: 16px;
  }

  #mainPage .glass-panel {
    padding: 20px;
  }
}

/* 手机 */
@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  html, body {
    overflow-y: auto;
    height: auto;
  }

  .page {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 12px;
  }

  .glass-panel {
    padding: 20px 16px;
    border-radius: 24px;
  }

  h1 {
    font-size: clamp(22px, 7vw, 32px);
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .form {
    gap: 12px;
  }

  .input-group input,
  .input-group textarea,
  .input-group select {
    font-size: 16px;
    padding: 12px 14px;
  }

  .input-group textarea {
    min-height: 80px;
  }

  .btn-primary {
    font-size: 16px;
    padding: 14px 24px;
  }

  .btn-small {
    font-size: 13px;
    padding: 6px 12px;
  }

  #mainPage .glass-panel {
    padding: 18px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .header h1 {
    margin: 0;
  }

  .user-info {
    width: 100%;
    justify-content: space-between;
  }

  .message-form {
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 20px;
  }

  .message-form textarea {
    font-size: 15px;
    padding: 12px 14px;
    min-height: 80px;
    margin-bottom: 12px;
  }

  .form-row {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .form-row .input-group {
    width: 100%;
  }

  .form-row .btn-primary {
    width: 100%;
  }

  .message-list {
    max-height: none;
  }

  .message-item {
    padding: 14px;
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .message-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .message-header .sender {
    font-size: 15px;
  }

  .message-header .date {
    font-size: 12px;
  }

  .message-content {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
  }

  .message-locked {
    font-size: 13px;
    padding: 12px;
    gap: 8px;
  }

  .message-footer {
    gap: 8px;
  }

  .search-results {
    max-height: 250px;
  }

  .search-item,
  .request-item {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .search-item button,
  .request-item button {
    width: 100%;
  }

  #pendingRequests h3,
  #sentRequests h3 {
    font-size: 16px;
  }

  .link-text {
    font-size: 13px;
  }
}

/* 超小屏幕 */
@media (max-width: 375px) {
  .page {
    padding: 10px;
  }

  .glass-panel {
    padding: 16px 14px;
  }

  h1 {
    font-size: 20px;
  }

  .message-item {
    padding: 12px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .btn-primary,
  .btn-secondary,
  .btn-small {
    min-height: 44px;
  }

  .input-group input,
  .input-group textarea,
  .input-group select {
    font-size: 16px; /* 防止iOS缩放 */
  }
}

/* 横屏手机优化 */
@media (max-width: 896px) and (orientation: landscape) {
  .page {
    padding: 16px;
  }

  .message-list {
    max-height: 300px;
  }
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .orb {
    animation: none !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  :root {
    --glass-border: rgba(0, 0, 0, 0.3);
  }

  .glass-panel,
  .message-item {
    border-width: 2px;
  }

  .glass-panel {
    background: rgba(255, 255, 255, 0.9);
  }
}