/* CoPaw Mobile Responsive Styles */
/* 移动端响应式样式 - 优化手机浏览体验 */

/* 语音录制动画 */
@keyframes pulse-red {
  0%, 100% { background-color: #ff4d4f; transform: scale(1); }
  50% { background-color: #ff7875; transform: scale(1.1); }
}

@keyframes sound-wave {
  0%, 100% { height: 10px; }
  50% { height: 24px; }
}

@media (max-width: 768px) {
  /* 隐藏所有侧边栏和导航元素 */
  [class*="sidebar"],
  [class*="side-bar"],
  [class*="nav"],
  [class*="menu"],
  [class*="drawer"],
  .ant-layout-sider,
  .ant-menu,
  .copaw-sidebar,
  .copaw-side,
  aside,
  nav:not([aria-label="breadcrumb"]) {
    display: none !important;
  }

  /* 主内容区域占满全屏 */
  .ant-layout,
  .ant-layout-content,
  #root,
  body,
  html {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 聊天容器占满屏幕 */
  [class*="chat"],
  [class*="message"],
  .chat-container,
  .message-list,
  .chat-main,
  main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 隐藏顶部导航栏（保留必要的） */
  .ant-layout-header,
  header:not(.ant-breadcrumb) {
    display: none !important;
  }

  /* 聊天输入区域固定在底部 */
  [class*="input"],
  [class*="composer"],
  .chat-input,
  .message-input,
  [class*="chat-input-wrapper"],
  [class*="input-area"],
  form[role="search"],
  div[data-testid="chat-input"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 8px 12px !important;
    background: #fff !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* 确保输入框容器可见 */
  [class*="input"] *,
  [class*="composer"] *,
  .chat-input *,
  .message-input * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 发送按钮强制显示 */
  button[type="submit"],
  button[class*="send"],
  button[class*="submit"],
  [class*="send-button"],
  [class*="submit-button"],
  svg[class*="send"],
  .ant-btn-icon-only {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 40px !important;
    min-height: 40px !important;
    z-index: 1001 !important;
  }

  /* 聊天消息区域留出底部空间 */
  [class*="message-list"],
  [class*="chat-history"] {
    padding-bottom: 80px !important;
  }

  /* 优化消息气泡 */
  [class*="message"] {
    max-width: 90% !important;
  }

  /* 隐藏设置、工具等非核心页面元素 */
  [class*="settings"],
  [class*="config"],
  [class*="tool-list"] {
    display: none !important;
  }

  /* 确保内容可滚动 */
  .page-content,
  .ant-layout-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 优化字体大小 */
  body {
    font-size: 14px !important;
  }

  /* 按钮适配移动端 */
  .ant-btn {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }

  /* 输入框优化 */
  .ant-input,
  textarea.ant-input {
    font-size: 16px !important; /* 防止 iOS 缩放 */
  }

  /* 语音按钮样式 */
  .voice-btn,
  [class*="voice"],
  [class*="mic"],
  [class*="audio"] {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 录音中状态 */
  .recording-active {
    animation: pulse-red 1s infinite !important;
  }

  /* 录音波形动画 */
  .sound-wave {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    height: 30px !important;
  }

  .sound-wave-bar {
    width: 4px !important;
    background: #ff4d4f !important;
    border-radius: 2px !important;
    animation: sound-wave 0.5s ease-in-out infinite !important;
  }

  .sound-wave-bar:nth-child(1) { animation-delay: 0s !important; }
  .sound-wave-bar:nth-child(2) { animation-delay: 0.1s !important; }
  .sound-wave-bar:nth-child(3) { animation-delay: 0.2s !important; }
  .sound-wave-bar:nth-child(4) { animation-delay: 0.3s !important; }
  .sound-wave-bar:nth-child(5) { animation-delay: 0.4s !important; }
}

/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
  /* 进一步简化布局 */
  .ant-card {
    border-radius: 0 !important;
    border: none !important;
  }

  /* 消息气泡更小 */
  [class*="message"] {
    max-width: 95% !important;
  }

  /* 头像缩小 */
  [class*="avatar"] {
    width: 32px !important;
    height: 32px !important;
  }
}