/* ============================================================
   肯森特AI — 响应式样式（多断点）
   ============================================================ */

/* ---- 平板横屏 (≤1024px) ---- */
@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 平板竖屏 (≤768px) ---- */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }

  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    z-index: 600;
    width: 280px;
    transition: left var(--transition-normal);
  }

  .sidebar.open {
    left: 0;
  }

  .sidebar.open + .sidebar-overlay {
    display: block;
  }

  .btn-hamburger {
    display: flex;
  }

  .chat-inner, .inp-area {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    flex-wrap: wrap;
  }

  .summary-stats {
    grid-template-columns: 1fr;
  }

  .q-actions {
    flex-direction: column;
    align-items: center;
  }

  /* ---- 移动端专属控件显示 ---- */
  .btn-mobile {
    display: flex;
  }

  /* 移动端隐藏桌面端控件 */
  .pill-wrap, .pill-select, .btn-att {
    display: none;
  }

  /* 发送按钮保持可见 */
  .btn-send {
    display: flex;
  }

  /* ---- 底部导航 ---- */
  .mobile-nav {
    display: flex;
  }

  /* 主区域留出底部导航高度 */
  .main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* 输入区域贴底，避开底部导航 */
  .inp-area {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--space-2);
  }

  /* Toast 通知位置避开底部导航 */
  .toast-container {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    top: auto;
  }

  /* ---- 输入区移动端优化 ---- */
  .bar-r {
    gap: var(--space-1);
  }

  .bar-r .btn-send {
    width: 40px;
    height: 40px;
  }

  /* ---- 模态框移动端适配 ---- */
  .modal-box {
    width: calc(100vw - var(--space-8));
    margin: var(--space-4);
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ---- 大屏手机 (≤480px) ---- */
@media (max-width: 480px) {
  .inp-wrap {
    min-height: 120px;
  }

  .inp-body textarea {
    min-height: 60px;
  }

  .greet h1 {
    font-size: 24px;
  }

  .card-grid {
    gap: var(--space-3);
  }

  .msg-row {
    gap: 10px;
  }

  .avatar {
    width: 32px; height: 32px;
  }

  .msg.user .bub {
    max-width: 95%;
  }

  .modal-box {
    width: calc(100vw - var(--space-8));
    margin: var(--space-4);
  }

  .toast {
    max-width: calc(100vw - var(--space-8));
  }

  .team-cards {
    flex-direction: column;
    align-items: center;
  }

  .team-card {
    width: 100%;
    max-width: 280px;
  }
}

/* ---- 小型手机 (≤320px) ---- */
@media (max-width: 320px) {
  .header-row {
    padding: 10px var(--space-3);
  }
}