/* ============================================================================
   星枢AI StarPivot.ai —— 全站响应式收口 responsive.css
   断点对齐参考站：≥1920 大屏 / ≤1280 笔记本 / ≤991 平板抽屉 / ≤767 手机 /
                  ≤480 小屏手机 / ≤360 极小屏 / 横屏矮高度
   原则：只做布局自适应，不改任何功能、配色与打字机效果；最后加载，统一收口。
   ============================================================================ */

/* ---------- 0. 全局：杜绝横向溢出 / 长文本撑破 / flex 爆框 ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.ws-main, .ws-chat, .composer-box, .ws-modal, .modal-mask,
.cp-v2, .chat-bubble, .wm-body, .um-grid, .ag-form-card { min-width: 0; }
img, svg, video { max-width: 100%; }
.chat-bubble, .wm-body, .ag-form-card, .ws-current-model { word-break: break-word; overflow-wrap: anywhere; }
/* 现代浏览器用动态视口高，避免手机地址栏把底部输入框顶出屏幕 */
@supports (height: 100dvh) {
  body.workspace-page, .workspace-shell { height: 100dvh; }
}

/* ============================================================================
   1. 大屏 / 笔记本（桌面分辨率自适应缩放，不出现拉得过宽或挤压）
   ============================================================================ */
@media (min-width: 1920px) {
  .ws-v2 .ws-sidebar { width: 320px !important; }
  /* 超宽屏对话内容居中限宽，提升可读性 */
  #chatThread .chat-thread-inner,
  #chatThread .msg-list,
  #chatThread > .chat-inner { max-width: 1080px; margin-left: auto; margin-right: auto; width: 100%; }
  #wsComposer .composer-box { max-width: 1080px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 1440px) and (min-width: 1281px) {
  .ws-v2 .ws-sidebar { width: 288px !important; }
}
@media (max-width: 1280px) {
  .ws-v2 .ws-sidebar { width: 264px !important; }
  .ws-sidebar .side-brand { padding: 13px 14px; }
  .ws-topbar { padding: 10px 14px; gap: 9px; }
  .sb-nav-item { gap: 8px; }
  .ws-model-item, .ws-model-list .model-item { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================================
   2. ≤991px 平板：左侧栏变抽屉（遮罩 + 汉堡），主区满宽
   ============================================================================ */
@media (max-width: 991px) {
  .ws-v2 .ws-sidebar {
    position: fixed !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: min(84vw, 330px) !important;
    height: 100vh !important; height: 100dvh !important;
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    z-index: 2200 !important;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,.5);
  }
  body.drawer-open .ws-sidebar { transform: translateX(0); }
  /* 抽屉遮罩 */
  .drawer-mask {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
    display: none; border: 0;
  }
  .drawer-mask.show { display: block; }
  .ws-main { width: 100%; flex: 1 1 auto; margin-left: 0 !important; }
  /* 桌面“折叠侧栏/贴边竖条”在平板无意义，统一为抽屉触发 */
  #sbExpandBtn { display: none !important; }
  .sb-collapse { display: none !important; }
  /* 灵感创作台左右双栏改上下 */
  .ws-v2 .cv-body { grid-template-columns: 1fr !important; }
  /* 弹窗留边 */
  .modal-mask { padding: 14px; }
  .ws-modal { max-width: 94vw !important; }
  /* 应用中心弹层不超出屏幕 */
  .app-center-pop {
    position: fixed; top: 56px; right: 10px; left: 10px;
    max-width: none !important; max-height: 78vh; overflow-y: auto;
  }
}

/* ============================================================================
   3. ≤767px 手机：顶栏精简、对话/输入区自适应、弹窗近全屏、网格降列
   ============================================================================ */
@media (max-width: 767px) {
  /* ---- 顶栏 ---- */
  .ws-topbar { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; }
  .ws-topbar .tb-new-chat { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
  .tb-circle, .tb-tip-btn { width: 32px; height: 32px; }
  /* 商务合作只留宝石图标 */
  .tb-biz .tb-biz-txt { display: none; }
  .ws-topbar .tb-title { display: none !important; }

  /* ---- 当前模型头部缩小 ---- */
  .ws-current-model { padding: 14px 12px 6px; gap: 8px; }
  .ws-current-model .cm-ico, .ws-current-model .model-avatar { width: 52px !important; height: 52px !important; }
  .ws-current-model h2, .ws-current-model .cm-name { font-size: 18px !important; }
  .ws-current-model p, .ws-current-model .cm-desc { font-size: 12.5px !important; max-width: 94%; }

  /* ---- 对话区 ---- */
  .ws-chat { padding: 12px 10px 8px !important; }
  .chat-bubble { max-width: 94% !important; font-size: 14px; }
  .msg-actions .msg-act-btn { padding: 4px 7px; }

  /* ---- 输入区：参数胶囊横向滑动不换行、不挤压 ---- */
  #wsComposer { padding: 6px 8px 8px !important; }
  .composer-box { padding: 9px 10px 8px !important; border-radius: 16px !important; }
  .composer-box textarea { font-size: 16px !important; line-height: 1.55; } /* 16px 防 iOS 聚焦自动放大 */
  .composer-toolbar { gap: 8px; flex-wrap: wrap; }
  .composer-params {
    flex-wrap: nowrap !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .composer-params::-webkit-scrollbar { display: none; }
  .composer-params .param-chip { flex: 0 0 auto; white-space: nowrap; }
  /* 上传槽缩小并允许横向排 */
  .cp-frames { gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .cp-frames::-webkit-scrollbar { display: none; }
  .cp-frame-add { width: 60px !important; height: 72px !important; }
  /* 参数下拉菜单不超出视口 */
  .cp-param-menu, .sp-dd-menu, .param-menu {
    max-width: calc(100vw - 20px) !important; max-height: 60vh; overflow-y: auto;
  }
  /* 发送按钮保持可点尺寸（≥40px 触控热区） */
  .send-btn, .send-stack .send-btn { min-width: 42px; min-height: 42px; }

  /* ---- 弹窗近全屏 ---- */
  .modal-mask { padding: 10px; }
  .ws-modal { max-width: 100% !important; width: 100% !important; max-height: 92vh; border-radius: 16px !important; }
  .ws-modal .wm-head { padding: 14px 14px 10px; }
  .ws-modal .wm-body { padding: 12px 14px 16px; }
  /* 充值/套餐类网格两列 */
  .recharge-packages, .recharge-grid, .packages-grid, .pay-packages {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important;
  }
  /* 智能体表单/专家网格单列 */
  #agentWorkspace .ag-expert-grid { flex-direction: column; }
  #agentWorkspace .ag-form-card { padding: 14px; margin: 10px; }
  /* 灵感/广场类多列网格降为两列 */
  .insp-grid, .insp-waterfall, .square-grid, .cv-grid,
  .agent-square-grid, .insp-masonry {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-count: 2 !important;
  }
  /* 侧栏底部账号区紧凑 */
  .ws-profile { padding: 10px 12px !important; }
  .ws-recharge { width: 100%; }
}

/* ============================================================================
   4. ≤480px 小屏手机：进一步单列 / 精简 / 触控热区
   ============================================================================ */
@media (max-width: 480px) {
  .ws-topbar { gap: 5px; padding: 7px 8px; }
  /* 新建对话只留加号，历史/玩法收起到应用中心，腾出空间 */
  .tb-new-chat { padding: 7px 9px; font-size: 12.5px; }
  .tb-history-ico, .tb-idea-ico { display: none !important; }
  .side-brand strong, .sb-titles strong { font-size: 14.5px; }
  .sb-titles small { font-size: 10px; }
  .ws-cats { gap: 5px; padding: 10px 10px 4px; }
  .ws-cats .sb-cat, .ws-cats button { padding: 5px 10px; font-size: 12.5px; }

  .chat-bubble { max-width: 96% !important; }
  .composer-box textarea { font-size: 16px !important; }
  .composer-params .param-chip { font-size: 12.5px; padding: 5px 9px; }
  .cp-frame-add { width: 54px !important; height: 66px !important; font-size: 11px; }
  /* 价格角标等绝对定位元素防顶出 */
  .cp-corner, .composer-box .price-tag { font-size: 11px; max-width: 46%; text-align: right; }

  /* 弹窗完全贴边全屏化 */
  .modal-mask { padding: 0; }
  .ws-modal { max-height: 100vh; height: 100%; border-radius: 0 !important; border: 0 !important; }
  /* 套餐单列 */
  .recharge-packages, .recharge-grid, .packages-grid, .pay-packages {
    grid-template-columns: 1fr !important;
  }
  /* 灵感/广场单列瀑布 */
  .insp-grid, .insp-waterfall, .square-grid, .cv-grid,
  .agent-square-grid, .insp-masonry { grid-template-columns: 1fr !important; column-count: 1 !important; }
  .um-grid { grid-template-columns: 1fr !important; }
  /* 应用中心弹层满宽 */
  .app-center-pop { left: 6px; right: 6px; top: 52px; }
}

/* ============================================================================
   5. ≤360px 极小屏（iPhone SE1 / 老旧安卓）
   ============================================================================ */
@media (max-width: 360px) {
  .ws-v2 .ws-sidebar { width: 88vw !important; }
  .ws-topbar .tb-new-chat .nc-plus { margin-right: 0; }
  .ws-topbar .tb-new-chat { font-size: 0; gap: 0; padding: 7px 9px; }
  .ws-topbar .tb-new-chat .nc-plus { display: inline-block; }
  .composer-params .param-chip { font-size: 12px; padding: 4px 8px; }
  .send-stack { gap: 4px; }
}

/* ============================================================================
   6. 横屏矮高度手机：抽屉与弹窗内部滚动，不被裁切
   ============================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .ws-v2 .ws-sidebar { overflow-y: auto; }
  .ws-modal { max-height: 96vh; }
  .ws-current-model { padding: 8px 10px 4px; }
  .ws-current-model .cm-ico, .ws-current-model .model-avatar { width: 44px !important; height: 44px !important; }
}

/* ============================================================================
   7. 展示页 index.html（星环落地页）自适应 —— 结构不动，只做排布/字号/防溢出
   ============================================================================ */
@media (max-width: 991px) {
  .site-header, .top-nav, header.nav-bar { flex-wrap: wrap; gap: 10px; padding: 12px 18px; }
  .hero, .hero-section { padding-left: 20px; padding-right: 20px; }
  .hero h1, .hero-title { font-size: clamp(28px, 6vw, 46px) !important; line-height: 1.18; }
  .hero p, .hero-sub { font-size: clamp(14px, 2.4vw, 18px) !important; }
  /* 各类卡片/特性网格统一自适应降列 */
  .feature-grid, .partner-grid, .card-row, .use-grid, .creation-grid,
  .model-scroll, .feat-cards, .steps-grid, .pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }
  .orbit-stage { transform: scale(.9); transform-origin: center top; }
}
@media (max-width: 767px) {
  .site-header .nav-links, .main-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .hero h1, .hero-title { font-size: clamp(24px, 7.4vw, 34px) !important; }
  .orbit-stage { transform: scale(.78); }
  section { padding-left: 14px; padding-right: 14px; }
  .footer-grid, .footer-cols { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .orbit-stage { transform: scale(.66); }
  .footer-grid, .footer-cols { grid-template-columns: 1fr !important; }
  .hero-actions, .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-actions > *, .hero-btns > * { width: 100%; margin-left: 0 !important; }
}

/* ============================================================================
   8. 后台 admin.html：宽表格横向滚动，不挤压重叠
   ============================================================================ */
@media (max-width: 991px) {
  .admin-shell, .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100% !important; position: static !important; }
  .admin-content, .admin-main { width: 100% !important; padding: 12px; }
  .admin-content table, .admin-table, table.data-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-stat-grid, .stat-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 480px) {
  .admin-stat-grid, .stat-cards { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   9. 触屏设备：去掉 hover 位移误触、保证最小触控尺寸
   ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .recharge-package:hover, .ws-model-item:hover, .card:hover { transform: none !important; }
  button, .param-chip, .ws-model-item, .um-item, .sb-nav-item { -webkit-tap-highlight-color: transparent; }
}

/* ============================================================================
   10. 手机端输入区发送组归位（实测修正：避免 AI/发送钮压住参数胶囊）
   ============================================================================ */
@media (max-width: 767px) {
  /* 无论上行 justify 如何，发送组始终靠右；AI 钮与发送钮并排，不悬浮压参数行 */
  .cp-v2 .composer-bottom { flex-wrap: nowrap; }
  .cp-v2 .composer-bottom .send-stack { margin-left: auto !important; flex-direction: row !important; align-items: center; gap: 8px; }
  .cp-v2 .send-stack > .ai-writer-open { position: static !important; transform: none !important; bottom: auto; left: auto; }
  .cp-v2 .send-stack > .ai-writer-open:hover { transform: scale(1.06) !important; }
  /* 参数行与发送行留出空隙 */
  .cp-v2 .composer-params { margin-bottom: 8px; }
  /* 价格角标在极窄屏不顶出 */
  .cp-price, .cp-price-info, .cp-corner, .composer-box .price-tag {
    max-width: 52%; white-space: normal; line-height: 1.25; text-align: right; font-size: 10.5px !important; right: 8px !important;
  }
}
@media (max-width: 360px) {
  .cp-v2 .composer-params { margin-bottom: 8px; }
  .cp-v2 .send-btn, .cp-v2 .send-stack .send-btn { min-width: 40px; min-height: 40px; }
}

/* ============================================================================
   11. req14 新增组件响应式收口（聚焦工具组 / 价格簿 / 扫码换绑弹窗 / wode子标签）
   ============================================================================ */
@media (max-width: 991px) {
  .sp-pb-mask .sp-pb-panel, .sp-pricebook { width: min(94vw, 760px) !important; max-height: 84vh; }
  .cp-modal-mask .cp-modal-card { width: min(94vw, 560px) !important; }
}
@media (max-width: 767px) {
  /* 顶部大师行横向滑动，不换行撑高 */
  #cpMasters { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #cpMasters::-webkit-scrollbar { display: none; }
  #cpMasters > * { flex: 0 0 auto; }
  /* 左右悬浮工具组缩小、不遮挡输入 */
  .cp-side-left, .cp-side-right { gap: 4px !important; }
  .cp-side-left .cp-tool-btn, .cp-side-right .cp-tool-btn { width: 34px !important; height: 34px !important; }
  /* 价格簿近全屏 */
  .sp-pb-mask { padding: 10px !important; }
  .sp-pb-mask .sp-pb-panel { width: 100% !important; max-height: 88vh; border-radius: 16px !important; }
  .sp-pb-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .sp-pb-tabs::-webkit-scrollbar { display: none; }
  /* 扫码/换绑等自建弹窗近全屏 */
  .cp-modal-mask { padding: 12px !important; }
  .cp-modal-mask .cp-modal-card { width: 100% !important; max-height: 90vh; overflow-y: auto; border-radius: 16px !important; }
  /* 个人中心充值/账单子标签横向滚动 */
  .wd-bsubtabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .wd-bsubtabs::-webkit-scrollbar { display: none; }
  .wd-bsubtab { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .cp-side-left .cp-tool-btn, .cp-side-right .cp-tool-btn { width: 30px !important; height: 30px !important; }
}