/* 移动端优化样式 */
/* 仅在移动设备（宽度 <= 768px）生效 */
/* 遵循 d:\claude\cloud_app\memory\mobile_optimization_standards.md */

@media (max-width: 768px) {
  /* ========== 导航栏适配 ========== */
  body {
    padding-top: 100px !important;
  }

  #search-panel {
    top: 100px;
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #search-panel h1 {
    font-size: 18px;
    text-align: center;
    letter-spacing: 0.5px;
  }

  .search-box {
    max-width: 100%;
    justify-content: center;
    gap: 12px;
  }

  .search-box button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    font-size: 16px;
    flex: 1;
  }

  /* ========== 图谱容器 ========== */
  #graph-container {
    position: fixed;
    top: 160px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  /* 移动端图例和控件调整 */
  #graph-legend {
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    font-size: 11px;
  }

  #graph-controls {
    top: 10px;
    right: 10px;
    gap: 4px;
  }

  #graph-controls button {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* ========== 信息面板（移动端半屏） ========== */
  #info-panel {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 900;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
  }

  #info-panel.visible {
    transform: translateX(0);
  }

  #close-panel {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  /* 人物头像 */
  #character-portrait {
    margin-top: 60px;
    margin-bottom: 16px;
  }

  #portrait-img {
    width: 120px;
    height: 120px;
  }

  /* 人物信息 */
  #character-name {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .character-faction {
    font-size: 14px;
    margin-bottom: 16px;
  }

  #character-bio {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 0 20px;
  }

  /* 详细信息部分 */
  .detail-section {
    margin-bottom: 20px;
    padding: 0 20px;
  }

  .detail-section h4 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  #character-personality {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 技能列表 */
  .skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .skills-list span {
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
  }

  /* 经典台词 */
  .quotes-list {
    font-size: 14px;
    line-height: 1.6;
  }

  .quotes-list li {
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(42, 42, 92, 0.3);
    border-left: 3px solid #6366f1;
    border-radius: 4px;
  }

  /* 人物关系列表 */
  #character-relations {
    padding: 0 20px 20px;
  }

  #character-relations h3 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  #relations-list {
    max-height: none;
  }

  #relations-list li {
    padding: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 有时间线的关系 */
  #relations-list li.has-timeline::before {
    left: 8px;
    font-size: 10px;
  }

  .rel-type {
    padding: 4px 10px;
    font-size: 12px;
    margin-left: 16px;
  }

  .rel-name {
    font-size: 14px;
    margin-left: 8px;
  }

  /* 底部按钮 */
  .panel-buttons {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    margin-top: 20px;
  }

  .panel-buttons button {
    flex: 1;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 16px;
  }

  /* 已删除角色区域 */
  #deleted-chars-section {
    padding: 16px 20px;
    margin-top: 16px;
    border-top: 1px solid rgba(42, 42, 92, 0.5);
  }

  #deleted-chars-section h4 {
    font-size: 14px;
    margin-bottom: 12px;
  }

  /* ========== 模态框 ========== */
  .modal {
    width: 95%;
    max-width: none;
    margin: 10px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-content {
    padding: 20px;
    max-height: none;
  }

  .modal-content h2 {
    font-size: 20px;
    margin-bottom: 20px;
    padding-right: 40px;
  }

  .modal-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  /* 表单元素 */
  .form-group {
    margin-bottom: 16px;
  }

  .form-group label {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
  }

  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 12px;
    font-size: 16px; /* 防止iOS自动缩放 */
    border: 1px solid #3a3a6c;
    border-radius: 8px;
    background: #12122a;
    color: #e0e0e0;
    box-sizing: border-box;
  }

  .form-group textarea {
    min-height: 80px;
    resize: vertical;
  }

  /* 按钮样式 */
  button, .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  button:active, .btn:active {
    transform: scale(0.98);
    opacity: 0.8;
  }

  #submit-char-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    font-size: 16px;
  }

  /* 关系详情模态框 - 必须在信息面板之上 */
  #relation-detail-modal {
    z-index: 1100;
  }

  #relation-detail-modal .modal-content {
    width: 95%;
    max-height: 80vh;
    padding: 20px;
    overflow-y: auto;
  }

  #relation-detail-modal h2 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  #relation-timeline-header {
    margin-bottom: 16px;
    padding: 16px;
    background: rgba(42, 42, 92, 0.5);
    border-radius: 8px;
  }

  .relation-actors-display {
    font-size: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .relation-actor-name {
    font-size: 14px;
    padding: 4px 8px;
  }

  .relation-type-badge {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* 时间线样式 */
  .timeline {
    padding: 16px 0;
  }

  .timeline-event {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(42, 42, 92, 0.3);
    border-radius: 8px;
    border-left: 3px solid #6366f1;
  }

  .timeline-event-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
  }

  .timeline-event-year {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
  }

  .timeline-event-book {
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 4px;
  }

  .timeline-event-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .timeline-empty {
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
    color: #8a8aaa;
  }

  /* ========== 恢复角色模态框 ========== */
  #restore-chars-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
  }

  .restore-char-item {
    padding: 12px;
    background: rgba(42, 42, 92, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .restore-char-item:active {
    background: rgba(99, 102, 241, 0.2);
    transform: scale(0.98);
  }

  .restore-char-item-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .restore-char-item-bio {
    font-size: 13px;
    color: #8a8aaa;
  }

  /* ========== 密码验证模态框 ========== */
  #password-modal .modal-content {
    max-width: 400px;
  }

  #password-modal .modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }

  #password-modal .modal-buttons button {
    flex: 1;
    min-height: 44px;
    font-size: 16px;
  }

  /* ========== 加载和错误提示 ========== */
  #loading-overlay {
    padding: 20px;
  }

  #loading-text {
    font-size: 16px;
    margin-top: 16px;
  }

  #error-toast {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 16px;
    font-size: 14px;
  }

  /* ========== 底部信息栏 ========== */
  /* 移动端隐藏底部信息栏 */
  #book-info-bar {
    display: none !important;
  }

  /* ========== D3.js 图谱优化 ========== */
  .node-circle {
    r: 17 !important; /* 移动端节点稍小 */
  }

  .node-label {
    font-size: 11px !important;
  }

  .link-label {
    font-size: 11px !important;
  }

  /* 移动端隐藏非必要元素 */
  .desktop-only {
    display: none;
  }

  /* 性能优化：禁用移动端复杂动画 */
  .heavy-animation {
    animation: none !important;
  }

  /* 触摸优化 */
  @media (hover: none) and (pointer: coarse) {
    button:hover,
    .btn:hover,
    #relations-list li:hover {
      background: initial;
      transform: none;
    }

    button:active,
    .btn:active,
    #relations-list li:active {
      transform: scale(0.98);
      opacity: 0.8;
    }
  }

  /* ========== 小屏手机特殊优化 ========== */
  @media (max-width: 375px) {
    #search-panel h1 {
      font-size: 16px;
    }

    .search-box button {
      font-size: 14px;
      padding: 10px 16px;
    }

    #character-name {
      font-size: 20px;
    }

    .modal-content {
      padding: 16px;
    }

    .timeline-event {
      padding: 10px;
    }
  }
}

/* ========== 平板适配 (768px - 1024px) ========== */
@media (min-width: 768px) and (max-width: 1024px) {
  #info-panel {
    width: 400px;
    right: 0;
  }

  .modal {
    width: 600px;
  }
}