/* =============================================================================
 * EGO 网页端 / 桌面端布局适配
 * 作用域：runtime-mobile-web 且非 runtime-android-app（APK WebView 不受影响）
 * 断点：≤768 移动 | 769–1199 平板 | ≥1200 PC | ≥1600 宽屏
 * ============================================================================= */

html.runtime-mobile-web:not(.runtime-android-app) body {
  overflow-x: hidden;
}

html.runtime-mobile-web:not(.runtime-android-app),
html.runtime-mobile-web:not(.runtime-android-app) .stage,
html.runtime-mobile-web:not(.runtime-android-app) .device,
html.runtime-mobile-web:not(.runtime-android-app) .screen {
  box-sizing: border-box;
}

/* —— 全端：去掉 390×844 手机 mockup 机壳 —— */
html.runtime-mobile-web:not(.runtime-android-app) .stage {
  min-height: 100dvh;
  height: 100%;
  padding: 0;
  display: block;
  align-items: stretch;
  justify-content: stretch;
  overflow-x: hidden;
}

html.runtime-mobile-web:not(.runtime-android-app) .device {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100dvh;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

html.runtime-mobile-web:not(.runtime-android-app) .device::before,
html.runtime-mobile-web:not(.runtime-android-app) .statusbar {
  display: none;
}

html.runtime-mobile-web:not(.runtime-android-app) .screen {
  border-radius: 0;
  min-height: 100dvh;
  overflow-x: hidden;
}

html.runtime-mobile-web:not(.runtime-android-app) .app-shell {
  inset: 0;
}

html.runtime-mobile-web:not(.runtime-android-app) .pages {
  min-height: 0;
}

/* 仅对话/创作正文图片响应式；勿覆盖智能体头像、Live2D、顶栏图标等固定尺寸图 */
html.runtime-mobile-web:not(.runtime-android-app) .chat-thread img,
html.runtime-mobile-web:not(.runtime-android-app) .create-flow-scroll img,
html.runtime-mobile-web:not(.runtime-android-app) .create-result-thread img,
html.runtime-mobile-web:not(.runtime-android-app) .kb-scroll-area img:not(.agents-sq-img):not(.agents-sq-card-cover) {
  max-width: 100%;
  height: auto;
}

html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-card-cover,
html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-img,
html.runtime-mobile-web:not(.runtime-android-app) .agents-chat-avatar,
html.runtime-mobile-web:not(.runtime-android-app) .home-ego-agent-img,
html.runtime-mobile-web:not(.runtime-android-app) .agents-chat-hd-img,
html.runtime-mobile-web:not(.runtime-android-app) .agents-mine-avatar-img,
html.runtime-mobile-web:not(.runtime-android-app) .home-chat-bg-img,
html.runtime-mobile-web:not(.runtime-android-app) .agents-chat-bg-img {
  max-width: none;
  height: 100%;
}

html.runtime-mobile-web:not(.runtime-android-app) svg.robot-mark {
  max-width: none;
  height: auto;
}

/* —— 平板 / 小屏网页 769–1199 —— */
@media (min-width: 769px) {
  html.runtime-mobile-web:not(.runtime-android-app) {
    --ego-pc-sidebar-w: 0px;
    --ego-pc-content-max: 960px;
    --ego-pc-rail-max: 720px;
    --ego-pc-chat-max: 780px;
    --ego-pc-page-pad: 20px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .pages {
    max-width: min(var(--ego-pc-content-max), calc(100vw - 48px)) !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: var(--ego-pc-page-pad);
    padding-right: var(--ego-pc-page-pad);
    box-sizing: border-box;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .bottom-rail {
    max-width: min(var(--ego-pc-rail-max), calc(100vw - 48px)) !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .composer {
    max-width: 100%;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .composer-input {
    max-height: 120px;
  }

  /* 对话区居中限宽 */
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="home"].active .home-body-split,
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="home"].active .home-chat-col {
    max-width: var(--ego-pc-chat-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="home"].active .chat-row.user,
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="home"].active .chat-row.assistant {
    padding-left: calc(min(18vw, 140px) + 12px) !important;
    padding-right: 16px !important;
  }

  /* 智能体广场：三列 */
  html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  /* 创作体裁：双列网格 */
  html.runtime-mobile-web:not(.runtime-android-app) .create-genre-grid,
  html.runtime-mobile-web:not(.runtime-android-app) .create-genre-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* 知识库列表区限宽 */
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="kb"].active .kb-scroll-area {
    max-width: var(--ego-pc-content-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: var(--ego-pc-page-pad);
    padding-right: var(--ego-pc-page-pad);
    box-sizing: border-box;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="me"].active .me-user-card,
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="me"].active .me-section-card {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 历史侧栏加宽 */
  html.runtime-mobile-web:not(.runtime-android-app) .home-drawer .hd-panel {
    width: 320px;
    max-width: 38vw;
  }

  /* 弹窗居中限宽 */
  html.runtime-mobile-web:not(.runtime-android-app) .overlay.open .login-card,
  html.runtime-mobile-web:not(.runtime-android-app) .privacy-modal,
  html.runtime-mobile-web:not(.runtime-android-app) .confirm-card {
    max-width: 440px;
    width: calc(100% - 48px);
    margin: 0 auto;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .agents-mine-editor {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* —— PC 网页 ≥1200：左侧导航 + 居中内容 —— */
@media (min-width: 1200px) {
  html.runtime-mobile-web:not(.runtime-android-app) {
    --ego-pc-sidebar-w: 88px;
    --ego-pc-content-max: 1280px;
    --ego-pc-rail-max: 860px;
    --ego-pc-chat-max: 820px;
    --ego-pc-page-pad: 28px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) #tabbar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--ego-pc-sidebar-w) !important;
    max-width: var(--ego-pc-sidebar-w) !important;
    height: 100vh;
    height: 100dvh;
    flex: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    grid-template-rows: repeat(4, 1fr);
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(14, 18, 28, 0.98), rgba(8, 12, 20, 0.98));
    z-index: 120;
  }

  html.runtime-mobile-web.theme-light:not(.runtime-android-app) #tabbar {
    border-right-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  }

  html.runtime-mobile-web:not(.runtime-android-app) #tabbar button {
    font-size: 10px;
    gap: 4px;
    padding: 8px 4px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) #tabbar button span:last-child {
    transform: none;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .app-shell {
    margin-left: var(--ego-pc-sidebar-w);
    width: calc(100% - var(--ego-pc-sidebar-w));
    max-width: none;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .pages {
    max-width: min(var(--ego-pc-content-max), calc(100vw - var(--ego-pc-sidebar-w) - 48px)) !important;
    padding-left: var(--ego-pc-page-pad);
    padding-right: var(--ego-pc-page-pad);
  }

  html.runtime-mobile-web:not(.runtime-android-app) .bottom-rail {
    max-width: min(var(--ego-pc-rail-max), calc(100vw - var(--ego-pc-sidebar-w) - 48px)) !important;
    padding-bottom: 20px;
  }

  /* 智能体广场四列 */
  html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  /* 创作体裁三列 */
  html.runtime-mobile-web:not(.runtime-android-app) .create-genre-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html.runtime-mobile-web:not(.runtime-android-app) .create-form-page,
  html.runtime-mobile-web:not(.runtime-android-app) .create-page-inset {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 知识库卡片双列 */
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="kb"].active #kbList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="kb"].active #kbList .kb-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* 我的页卡片限宽 */
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="me"].active .me-user-card,
  html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="me"].active .me-section-card {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 智能体对话 / 编辑 */
  html.runtime-mobile-web:not(.runtime-android-app) .agents-chat-root,
  html.runtime-mobile-web:not(.runtime-android-app) .agents-square-root {
    max-width: var(--ego-pc-content-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .agents-mine-editor {
    max-width: 720px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .agents-mine-bg-preview {
    max-width: 100%;
    min-height: 160px;
  }

  /* 历史侧栏 PC 抽屉 */
  html.runtime-mobile-web:not(.runtime-android-app) .home-drawer .hd-panel {
    width: 360px;
    max-width: 32vw;
  }

  /* Toast 避开侧栏 */
  html.runtime-mobile-web:not(.runtime-android-app) .toast {
    left: calc(50% + var(--ego-pc-sidebar-w) / 2);
  }
}

/* —— 宽屏 ≥1600 —— */
@media (min-width: 1600px) {
  html.runtime-mobile-web:not(.runtime-android-app) {
    --ego-pc-content-max: 1360px;
    --ego-pc-rail-max: 920px;
    --ego-pc-chat-max: 860px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .create-genre-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* —— PC hover（不影响触摸端） —— */
@media (min-width: 769px) and (hover: hover) {
  html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  }

  html.runtime-mobile-web:not(.runtime-android-app) .kb-card:hover {
    border-color: rgba(46, 230, 201, 0.25);
  }

  html.runtime-mobile-web:not(.runtime-android-app) .create-genre-card:hover {
    border-color: rgba(91, 140, 255, 0.45);
  }

  html.runtime-mobile-web:not(.runtime-android-app) #tabbar button:hover {
    color: #c9d1de;
  }
}

/* —— 创作页 / 设置子页：消除横向溢出 —— */
html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="create"].active,
html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="agents"].active,
html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="home"].active {
  overflow-x: hidden;
  max-width: 100%;
}

html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="create"].active #createModule,
html.runtime-mobile-web:not(.runtime-android-app) .page[data-page="create"].active .create-flow-scroll {
  overflow-x: hidden;
  max-width: 100%;
}

/* —— 登录 / 设置 overlay 全屏居中 —— */
html.runtime-mobile-web:not(.runtime-android-app) .overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
}

html.runtime-mobile-web:not(.runtime-android-app) .confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 310;
}

/* —— 手机网页 ≤768：保留全屏壳 + 输入/底栏贴边 —— */
@media (max-width: 768px) {
  html.runtime-mobile-web:not(.runtime-android-app) .stage,
  html.runtime-mobile-web:not(.runtime-android-app) .device,
  html.runtime-mobile-web:not(.runtime-android-app) .screen {
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
    height: 100dvh;
    overflow-x: hidden;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .app-shell {
    inset: 0;
    width: 100%;
    max-width: 100vw;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .pages {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .bottom-rail {
    max-width: 100% !important;
    width: 100%;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .composer {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    border-radius: 22px;
    box-sizing: border-box;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .composer .composer-input,
  html.runtime-mobile-web:not(.runtime-android-app) .composer-input {
    font-size: 16px;
    min-height: 24px;
    max-height: 120px;
  }

  html.runtime-mobile-web:not(.runtime-android-app) #tabbar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-hub-shell,
  html.runtime-mobile-web:not(.runtime-android-app) .agents-sq-scroll {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  /* 首页机器人 + 3:7 气泡留白由 home-layout-v2.css 控制，此处勿覆盖 */
}