:root {
  --mobile-keyboard-offset: 0px;
  color-scheme: light;
  --mobile-bg: #f7f8fb;
  --mobile-surface: #fff;
  --mobile-ink: #17212b;
  --mobile-muted: #788697;
  --mobile-line: #e6ebf1;
  --mobile-accent: #5c55e8;
  --mobile-accent-soft: #eeedff;
  --mobile-shadow: 0 12px 32px rgba(44, 55, 82, .08);
  /* 统一尺子：控件高度 4 档、圆角 3 档、字阶 6 档 */
  --u-radius-sm: 8px;
  --u-radius-md: 12px;
  --u-radius-lg: 16px;
  --u-h-md: 36px;
  --u-h-lg: 40px;
  --u-h-xl: 44px;
  --u-fs-11: 11px;
  --u-fs-12: 12px;
  --u-fs-13: 13px;
  --u-fs-14: 14px;
  --u-fs-16: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--mobile-bg); color: var(--mobile-ink); }
button, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 3px solid rgba(92, 85, 232, .22); outline-offset: 2px; }
.mobile-prompt:focus, .mobile-prompt:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html.mobile-overlay-open, body.mobile-overlay-open { overflow: hidden; overscroll-behavior: none; }
.mobile-app { width: 100%; max-width: 520px; min-height: 100dvh; margin: 0 auto; padding-bottom: calc(82px + env(safe-area-inset-bottom)); background: var(--mobile-bg); }
.mobile-topbar { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; gap: 10px; height: 64px; padding: env(safe-area-inset-top) 18px 0; background: rgba(247, 248, 251, .9); backdrop-filter: blur(18px); }
.mobile-icon-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mobile-surface); color: var(--mobile-muted); box-shadow: 0 1px 0 rgba(24, 34, 48, .04); }
.mobile-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #222d38; color: #fff; font-size: 12px; font-weight: 800; }
.mobile-brand { display: grid; gap: 2px; flex: 1; }.mobile-brand span, .mobile-eyebrow { color: #a0aaba; font-size: 9px; letter-spacing: .18em; }.mobile-brand strong { font-size: 15px; }.mobile-top-actions { display: flex; align-items: center; gap: 6px; }
.mobile-main { padding: 12px 16px 0; }.mobile-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 2px 18px; }.mobile-heading h1 { margin: 5px 0 0; font-size: 26px; letter-spacing: -.045em; }.mobile-outline-button { min-height: 36px; padding: 0 12px; border: 1px solid var(--mobile-line); border-radius: 10px; background: #fff; color: #566575; font-size: 12px; }
.mobile-mode-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -2px 14px; padding: 3px 2px; scrollbar-width: none; }.mobile-mode-tabs::-webkit-scrollbar { display: none; }.mobile-mode-tabs button { flex: 0 0 auto; min-height: 38px; padding: 0 15px; border-radius: 12px; background: transparent; color: #7b8998; font-size: 13px; }.mobile-mode-tabs button.is-active { background: #fff; color: var(--mobile-accent); box-shadow: var(--mobile-shadow); font-weight: 700; }
.mobile-workspace { display: grid; gap: 12px; }.mobile-panel { border: 1px solid var(--mobile-line); border-radius: 20px; background: var(--mobile-surface); box-shadow: var(--mobile-shadow); }.mobile-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }.mobile-panel-head strong { font-size: 15px; }.mobile-panel-head span { color: var(--mobile-muted); font-size: 11px; }.mobile-empty { min-height: 270px; display: grid; place-items: center; padding: 42px 28px; text-align: center; }.mobile-empty-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px; background: var(--mobile-accent-soft); color: var(--mobile-accent); font-size: 26px; }.mobile-empty strong { display: block; font-size: 16px; }.mobile-empty p { max-width: 240px; margin: 7px auto 0; color: var(--mobile-muted); font-size: 12px; line-height: 1.6; }
.mobile-result { overflow: hidden; }.mobile-result img { display: block; width: 100%; max-height: 420px; object-fit: cover; background: #f1f3f7; }.mobile-result-toolbar { display: flex; gap: 8px; padding: 10px 12px 12px; }.mobile-result-toolbar button, .mobile-chip { min-height: 34px; padding: 0 11px; border-radius: 9px; background: #f4f5f8; color: #5b6a7b; font-size: 11px; }.mobile-result-toolbar button:first-child { color: var(--mobile-accent); background: var(--mobile-accent-soft); }
.mobile-composer { position: sticky; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 5; padding: 12px; border: 1px solid var(--mobile-line); border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px rgba(33, 42, 62, .12); backdrop-filter: blur(18px); }.mobile-ref-row { display: flex; gap: 8px; margin-bottom: 8px; overflow-x: auto; }.mobile-ref-add, .mobile-ref-thumb { position: relative; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; }.mobile-ref-add { display: grid; place-items: center; border: 1px dashed #cbd3de; background: #fafbfc; color: #758394; font-size: 24px; }.mobile-ref-thumb { border: 1px solid var(--mobile-line); }.mobile-ref-thumb img { width: 100%; height: 100%; object-fit: cover; }.mobile-ref-thumb button { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(20, 28, 37, .78); color: #fff; font-size: 12px; line-height: 1; }.mobile-prompt { width: 100%; min-height: 72px; resize: vertical; border: 0; background: transparent; color: var(--mobile-ink); font-size: 14px; line-height: 1.55; }.mobile-prompt::placeholder { color: #a8b1bc; }.mobile-composer-footer { display: flex; align-items: center; gap: 7px; margin-top: 8px; }.mobile-control { min-height: 36px; max-width: 130px; padding: 0 10px; border: 1px solid var(--mobile-line); border-radius: 10px; background: #fff; color: #4f5f70; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.mobile-control.primary { color: var(--mobile-accent); border-color: #d9d7ff; background: var(--mobile-accent-soft); }.mobile-send { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border-radius: 13px; background: #202c38; color: #fff; font-size: 18px; }.mobile-send[disabled] { opacity: .42; }
.mobile-card-grid { display: grid; gap: 10px; padding: 0 12px 14px; }.mobile-source { display: grid; place-items: center; min-height: 176px; margin: 0 12px 12px; border: 1px dashed #cdd5df; border-radius: 15px; background: #fafbfc; text-align: center; overflow: hidden; }.mobile-source img { width: 100%; height: 176px; object-fit: cover; }.mobile-source strong { display: block; font-size: 14px; }.mobile-source span { display: block; margin-top: 6px; color: var(--mobile-muted); font-size: 11px; }.mobile-action-row { display: flex; gap: 8px; padding: 0 12px 14px; }.mobile-action-row button { flex: 1; min-height: var(--u-h-lg); border-radius: var(--u-radius-md); background: #f2f3f6; color: #536374; font-size: var(--u-fs-12); }.mobile-action-row button.primary { background: var(--mobile-accent); color: #fff; }.mobile-layer-list { display: grid; gap: 7px; padding: 0 12px 12px; }.mobile-layer-row { display: flex; align-items: center; gap: 10px; min-height: var(--u-h-xl); padding: 0 10px; border: 1px solid var(--mobile-line); border-radius: var(--u-radius-md); background: #fff; text-align: left; }.mobile-layer-row.is-active { border-color: #bbb7ff; background: #f7f6ff; }.mobile-layer-index { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #eff0f4; color: #657384; font-size: 10px; }.mobile-layer-row strong { display: block; font-size: var(--u-fs-13); }.mobile-layer-row small { display: block; margin-top: 2px; color: var(--mobile-muted); font-size: var(--u-fs-11); }
.mobile-canvas { min-height: 242px; display: grid; place-items: center; margin: 0 12px 12px; border-radius: 15px; background: repeating-conic-gradient(#eef0f3 0 25%, #fafbfc 0 50%) 50% / 22px 22px; color: #788697; }.mobile-canvas-inner { width: 74%; aspect-ratio: 1 / 1; border-radius: 13px; background: linear-gradient(145deg, #e4e2ff, #fff 48%, #f9dbcb); box-shadow: 0 14px 30px rgba(57, 60, 106, .14); }.mobile-brush-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 12px; }.mobile-brush { flex: 0 0 42px; height: 42px; border: 1px solid var(--mobile-line); border-radius: 12px; background: #fff; color: #47596b; }.mobile-brush.is-active { border-color: var(--mobile-accent); color: var(--mobile-accent); background: var(--mobile-accent-soft); }.mobile-chat { display: grid; align-content: start; gap: 12px; padding: 0; }.mobile-chat-message { width: fit-content; max-width: 80%; min-width: 0; overflow-wrap: anywhere; padding: 10px 14px 8px; border-radius: 4px 14px 14px 14px; background: #f1f3f7; color: #465668; font-size: var(--u-fs-14); line-height: 20px; }.mobile-chat-message.user { justify-self: end; border-radius: 14px 14px 4px 14px; background: #202938; color: #fff; }.mobile-profile { padding: 16px; }.mobile-profile-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mobile-line); }.mobile-profile-row:last-child { border-bottom: 0; }.mobile-profile-row span { flex: 1; color: var(--mobile-muted); font-size: 12px; }.mobile-profile-row strong { font-size: 13px; }
.mobile-sheet[hidden] { display: none; }.mobile-sheet { position: fixed; z-index: 30; inset: 0; }.mobile-sheet-backdrop { position: absolute; inset: 0; background: rgba(18, 27, 38, .28); backdrop-filter: blur(4px); }.mobile-sheet-card { position: absolute; right: 0; bottom: 0; left: 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--u-radius-lg) var(--u-radius-lg) 0 0; background: #fff; box-shadow: 0 -14px 38px rgba(31, 42, 63, .18); animation: mobile-sheet-in .2s ease-out; }.mobile-sheet-grabber { width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 99px; background: #d8dde4; }.mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }.mobile-sheet-head button { width: 32px; height: 32px; border-radius: 50%; background: #f1f3f6; color: #6d7a89; font-size: 20px; }.mobile-sheet-options { display: grid; gap: 8px; }.mobile-sheet-options button { display: flex; align-items: center; justify-content: space-between; min-height: var(--u-h-xl); padding: 0 12px; border: 1px solid var(--mobile-line); border-radius: var(--u-radius-md); background: #fff; color: #47596b; font-size: var(--u-fs-14); }.mobile-sheet-options button.is-selected { border-color: #bbb7ff; color: var(--mobile-accent); background: var(--mobile-accent-soft); }.mobile-toast { position: fixed; z-index: 40; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); left: 16px; padding: 11px 13px; border-radius: 12px; background: #212d39; color: #fff; box-shadow: var(--mobile-shadow); font-size: 12px; text-align: center; animation: mobile-toast-in .18s ease-out; }
@keyframes mobile-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes mobile-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 768px) { body { padding: 18px 0; } .mobile-app { min-height: calc(100dvh - 36px); border: 1px solid var(--mobile-line); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 60px rgba(47, 58, 84, .12); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Mobile scope: keep the two production workspaces clear and easy to switch. */
.mobile-scope-note { align-self: center; color: var(--mobile-muted); font-size: 11px; white-space: nowrap; }
.mobile-section-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; padding: 4px; border: 1px solid var(--mobile-line); border-radius: 14px; background: #eef0f5; }
.mobile-section-tabs button { min-height: 42px; border-radius: 10px; background: transparent; color: #788697; font-size: 13px; font-weight: 600; }
.mobile-section-tabs button.is-active { background: #fff; color: var(--mobile-accent); box-shadow: 0 4px 14px rgba(44,55,82,.1); }
.mobile-mode-tabs[hidden] { display: none; }
.mobile-bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 520px; margin: 0 auto; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(230,235,241,.9); background: rgba(255,255,255,.94); box-shadow: 0 -10px 28px rgba(44,55,82,.08); backdrop-filter: blur(18px); }
.mobile-bottom-nav button { display: grid; justify-items: center; gap: 3px; min-height: 46px; border-radius: 12px; background: transparent; color: #8491a0; }
.mobile-bottom-nav button span { font-size: 18px; line-height: 1; }
.mobile-bottom-nav button small { font-size: 10px; }
.mobile-bottom-nav button.is-active { background: var(--mobile-accent-soft); color: var(--mobile-accent); font-weight: 700; }
@media (max-width: 380px) { .mobile-main { padding-inline: 12px; } .mobile-scope-note { font-size: 10px; } .mobile-composer-footer { gap: 4px; } .mobile-control { padding-inline: 7px; font-size: var(--u-fs-11); } }

/* Navigation drawer and phone-first account controls. These rules are scoped to
   mobile.html and do not affect the desktop workbench. */
.mobile-menu-glyph { position: relative; display: block; width: 19px; height: 16px; border: 2px solid #647283; border-radius: 4px; }
.mobile-menu-glyph::before, .mobile-menu-glyph::after, .mobile-menu-glyph i { content: ''; position: absolute; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: #647283; }
.mobile-menu-glyph::before { left: 4px; }.mobile-menu-glyph::after { right: 4px; }.mobile-menu-glyph i:first-child { left: 8px; }.mobile-menu-glyph i:last-child { display: none; }
.mobile-credit { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--mobile-line); border-radius: 9px; color: #586779; background: #fff; font-size: 12px; white-space: nowrap; }
.mobile-credit b { font-size: 14px; color: #273344; }.mobile-credit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mobile-accent); box-shadow: 0 0 0 3px rgba(92,85,232,.1); }
.mobile-icon-button { border: 1px solid var(--mobile-line); }
.mobile-sheet-options button small { color: var(--mobile-muted); font-size: 10px; }
.mobile-drawer[hidden] { display: none; }.mobile-drawer { position: fixed; z-index: 50; inset: 0; }.mobile-drawer-backdrop { position: absolute; inset: 0; background: rgba(18, 27, 38, .38); backdrop-filter: blur(3px); }
.mobile-drawer-card { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(86vw, 390px); padding: calc(15px + env(safe-area-inset-top)) 16px calc(15px + env(safe-area-inset-bottom)); border-right: 1px solid var(--mobile-line); border-radius: 0 24px 24px 0; background: var(--mobile-surface); box-shadow: 16px 0 42px rgba(31,42,63,.18); transform: translateX(-100%); transition: transform .22s ease-out; }
.mobile-drawer.is-open .mobile-drawer-card { transform: translateX(0); }.mobile-drawer-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 17px; }.mobile-drawer-head > div:nth-child(2) { display: grid; gap: 2px; flex: 1; }.mobile-drawer-head span { color: #a0aaba; font-size: 9px; letter-spacing: .18em; }.mobile-drawer-head strong { font-size: 17px; letter-spacing: -.03em; }.mobile-drawer-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #222d38; color: #fff; font-weight: 800; }.mobile-drawer-close { width: 34px; height: 34px; border: 1px solid var(--mobile-line); border-radius: 10px; background: #fff; color: #667586; font-size: 20px; }
.mobile-new-task { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 15px; border-radius: 14px; background: #202a38; color: #fff; font-size: 14px; font-weight: 700; text-align: left; }.mobile-new-task span { font-size: 22px; line-height: 1; }.mobile-new-task small { margin-left: auto; color: #b7bfca; font-size: 11px; font-weight: 500; }
.mobile-task-search { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 12px 0 15px; padding: 0 12px; border: 1px solid var(--mobile-line); border-radius: 13px; background: #fafbfc; color: #8c98a6; }.mobile-task-search span { font-size: 22px; line-height: 1; }.mobile-task-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--mobile-ink); font-size: 13px; }.mobile-task-search input::placeholder { color: #a3adba; }
.mobile-drawer-section-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }.mobile-drawer-section-head strong { font-size: 12px; }.mobile-drawer-section-head button { padding: 3px 4px; background: transparent; color: var(--mobile-accent); font-size: 11px; }.mobile-task-list { display: grid; gap: 7px; flex: 1; min-height: 120px; overflow-y: auto; padding-right: 2px; }.mobile-task-item { display: flex; align-items: center; gap: 10px; min-height: var(--u-h-xl); padding: 0 10px; border: 1px solid transparent; border-radius: var(--u-radius-md); background: #fff; color: var(--mobile-ink); text-align: left; }.mobile-task-item:hover, .mobile-task-item.is-active { border-color: #e4e2ff; background: #f5f4ff; }.mobile-task-thumb { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg,#e4e1ff,#f0d8cf); color: #5965c7; font-size: 14px; font-weight: 800; }.mobile-task-item > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; }.mobile-task-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--u-fs-13); }.mobile-task-item small { color: var(--mobile-muted); font-size: var(--u-fs-11); }.mobile-task-item i { color: #b1bbc7; font-size: 19px; font-style: normal; }.mobile-task-loading, .mobile-task-empty { padding: 28px 8px; color: var(--mobile-muted); font-size: 12px; line-height: 1.7; text-align: center; }.mobile-task-empty small { font-size: 11px; }
.mobile-drawer-credit { margin-top: 12px; padding: 14px 13px 12px; border: 1px solid var(--mobile-line); border-radius: 15px; background: #fafbff; }.mobile-drawer-credit > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }.mobile-drawer-credit span { color: var(--mobile-muted); font-size: 11px; }.mobile-drawer-credit strong { font-size: 24px; }.mobile-credit-bar { height: 6px; margin: 9px 0; overflow: hidden; border-radius: 99px; background: #e3e5f8; }.mobile-credit-bar i { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#877ef1,#c0baff); }.mobile-drawer-credit-foot { display: flex; align-items: center; justify-content: space-between; }.mobile-drawer-credit-foot small { color: var(--mobile-muted); font-size: 10px; }.mobile-drawer-credit-foot button { color: var(--mobile-accent); background: transparent; font-size: 11px; font-weight: 700; }
.mobile-auth { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(247,248,251,.88); backdrop-filter: blur(14px); }
.mobile-auth[hidden] { display: none; }
.mobile-auth-card { display: grid; gap: 14px; width: min(100%, 360px); padding: 24px; border: 1px solid #e4e7ef; border-radius: 24px; background: #fff; box-shadow: 0 22px 60px rgba(26,35,52,.16); }
.mobile-auth-brand { display: grid; gap: 4px; margin-bottom: 4px; }.mobile-auth-brand span { color: #8b93a3; font-size: 10px; font-weight: 700; letter-spacing: .16em; }.mobile-auth-brand strong { color: #1f2937; font-size: 24px; }.mobile-auth-brand small, .mobile-auth-note { color: #8b93a3; font-size: 12px; line-height: 1.5; }
.mobile-auth-card label { display: grid; gap: 6px; color: #4f5b6d; font-size: 13px; font-weight: 600; }.mobile-auth-card input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #dde2ec; border-radius: 12px; outline: none; background: #fbfcfe; color: #1f2937; font: inherit; }.mobile-auth-card input:focus { border-color: #7166f8; box-shadow: 0 0 0 3px rgba(113,102,248,.12); }
.mobile-auth-submit { padding: 12px; border-radius: 13px; background: #202938; color: #fff; font-size: 15px; font-weight: 700; }.mobile-auth-submit:disabled { cursor: wait; opacity: .6; }.mobile-auth-error { min-height: 18px; margin: 0; color: #d84d5a; font-size: 12px; }
/* Phone-browser layout. Keep this block scoped to the standalone mobile page;
   desktop workbench styles do not load this stylesheet. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  body { background: var(--mobile-bg); }
  .mobile-app { width: 100vw; max-width: 520px; min-width: 0; min-height: 100dvh; overflow-x: hidden; padding: calc(8px + env(safe-area-inset-top)) 0 calc(106px + env(safe-area-inset-bottom)); background: var(--mobile-bg); }
  .mobile-topbar { position: relative; width: auto; max-width: calc(100vw - 24px); min-width: 0; overflow: hidden; height: 54px; min-height: 54px; flex: 0 0 auto; margin: 0 12px 12px; padding: 5px; border: 1px solid var(--mobile-line); border-radius: var(--u-radius-lg); background: #fff; box-shadow: 0 2px 8px rgba(33, 45, 65, .04); }
  .mobile-menu-trigger { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #e4e8ef; border-radius: var(--u-radius-md); box-shadow: none; }
  .mobile-menu-glyph { width: 22px; height: 22px; border-width: 2px; border-radius: 5px; }
  .mobile-menu-glyph::before, .mobile-menu-glyph::after, .mobile-menu-glyph i { top: 3px; bottom: 3px; width: 2px; background: #647283; }
  .mobile-menu-glyph::before { left: 5px; }.mobile-menu-glyph::after { right: 5px; }.mobile-menu-glyph i:first-child { left: 9px; }
  .mobile-topbar-title { min-width: 0; flex: 1; overflow: hidden; color: #202938; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-top-actions { flex: 0 0 auto; gap: 6px; margin-left: auto; }
  .mobile-credit { min-width: 76px; height: 34px; padding: 0 10px; border: 1px solid #e4e8ef; border-radius: var(--u-radius-md); background: #fff; font-size: var(--u-fs-12); }
  .mobile-credit b { font-size: var(--u-fs-14); }.mobile-credit-dot { width: 7px; height: 7px; }
  .mobile-more-trigger { width: 38px; height: 38px; padding: 0; border: 1px solid #e4e8ef; border-radius: var(--u-radius-md); background: #f1f4f8; color: #202938; font-size: var(--u-fs-16); letter-spacing: 1px; }
  .mobile-main { width: auto; max-width: calc(100vw - 24px); min-width: 0; overflow: hidden; margin: 0 12px; padding: 16px; border: 1px solid #e2e7ef; border-radius: var(--u-radius-lg); background: #f9fafc; box-shadow: 0 2px 8px rgba(33, 45, 65, .03); }
  .mobile-heading { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; margin: 0 0 12px; }
  .mobile-heading > div { min-width: 0; }
  .mobile-heading h1 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.04em; white-space: nowrap; }
  .mobile-scope-note { display: none; }
  .mobile-section-tabs { display: none !important; }
  .mobile-mode-tabs { display: inline-flex; flex: 0 0 auto; gap: 2px; margin: 0; padding: 3px; border: 1px solid #e1e6ee; border-radius: var(--u-radius-md); background: #eef1f6; }
  .mobile-mode-tabs button { min-height: var(--u-h-md); padding: 0 12px; border-radius: var(--u-radius-sm); color: #8995a5; font-size: var(--u-fs-13); font-weight: 700; }
  .mobile-mode-tabs button.is-active { background: #fff; color: #202938; box-shadow: 0 2px 8px rgba(31, 43, 63, .07); }
  .mobile-history-actions { display: flex; justify-content: flex-end; gap: 10px; min-width: 0; margin: 0 0 16px; }
  .mobile-history-button { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; gap: 6px; min-height: var(--u-h-lg); padding: 0 10px; border: 1px solid #e2e7ef; border-radius: var(--u-radius-md); background: #fff; color: #738092; font-size: var(--u-fs-13); white-space: nowrap; }
  .mobile-history-button span { font-size: var(--u-fs-16); line-height: 1; }
  .mobile-workspace { display: block; min-width: 0; }
  .mobile-conversation { min-height: 0; padding-top: 0; }
  .mobile-day-card { overflow: hidden; border: 1px solid #e1e6ee; border-radius: 24px; background: #fff; }
  .mobile-day-head { display: grid; gap: 4px; padding: 16px; border-bottom: 1px solid #e7ebf1; }
  .mobile-day-head strong { color: #202938; font-size: 15px; }
  .mobile-day-head span { color: #8a96a6; font-size: var(--u-fs-12); }
  .mobile-day-title { padding: 12px 20px 0; color: #6f7e90; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-user-bubble { width: fit-content; max-width: 80%; min-width: 0; margin-left: auto; overflow-wrap: anywhere; padding: 10px 14px 8px; border-radius: 14px 14px 4px 14px; background: #202938; color: #fff; font-size: var(--u-fs-14); line-height: 20px; }
  .mobile-user-bubble small { display: block; margin-top: 4px; color: #aeb7c3; font-size: var(--u-fs-11); }
  .mobile-generation { margin-top: 14px; }
  .mobile-generation-meta { display: flex; align-items: center; gap: 2px; margin: 0 0 10px; color: #8b96a6; font-size: var(--u-fs-11); }
  .mobile-generation-meta strong { color: #596577; font-size: 12px; }
  .mobile-result { position: relative; overflow: hidden; max-width: none; margin: 0 0 14px; border-radius: 17px; background: #f1f3f7; box-shadow: 0 8px 24px rgba(27, 39, 57, .08); }
  .mobile-result img { display: block; width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: 1 / 1; object-fit: cover; background: #f1f3f7; }
  .mobile-result-toolbar { position: absolute; right: 12px; bottom: 12px; left: 12px; display: flex; gap: 8px; padding: 0; background: transparent; }
  .mobile-result-toolbar button { min-height: var(--u-h-md); padding: 0 10px; border-radius: var(--u-radius-sm); background: rgba(32, 41, 56, .88); color: #fff; font-size: var(--u-fs-12); }
  .mobile-pending { display: grid; place-items: center; min-height: 300px; margin-top: 32px; border-radius: 17px; background: #f0f2f6; color: #8b96a6; font-size: 12px; }
  .mobile-composer { position: relative; z-index: 1; max-width: none; margin: 18px 0 0; padding: 14px; border: 1px solid #e1e6ee; border-radius: 24px; background: #fff; box-shadow: 0 5px 18px rgba(33, 42, 62, .06); }
  .mobile-ref-row { margin: 0 0 8px; }
  .mobile-prompt-card { position: relative; display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 14px; min-height: 184px; padding: 14px; border: 1px solid #e0e6ee; border-radius: 20px; background: #fff; }
  .mobile-reference-tile { display: grid; align-content: center; justify-items: center; gap: 6px; min-width: 0; padding: 10px 6px; border: 2px dashed #cfd8e3; border-radius: 20px; background: #fff; color: #536274; }
  .mobile-reference-tile span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #202938; color: #fff; font-size: 34px; font-weight: 300; line-height: 1; }
  .mobile-reference-tile strong { font-size: 13px; white-space: nowrap; }
  .mobile-reference-tile small { color: #a0aaba; font-size: 9px; line-height: 1.3; text-align: center; }
  .mobile-compose-controls { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
  .mobile-compose-controls::-webkit-scrollbar { display: none; }
  .mobile-compose-controls .mobile-control { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 52px; max-width: 170px; min-height: 52px; padding: 0 12px; border-color: #dedcff; border-radius: 14px; background: #fff; color: #526074; font-size: 12px; }
  .mobile-compose-controls .mobile-control.primary { color: #273344; background: #fff; }
  .mobile-compose-controls .mobile-control i { color: #7f8b99; font-style: normal; }
  .mobile-cost { display: inline-flex; align-items: center; flex: 0 0 auto; height: 52px; padding: 0 12px; border: 1px solid #dedcff; border-radius: 14px; color: #756ec5; font-size: 11px; white-space: nowrap; }
  .mobile-cost strong { color: #3b3b55; }
  .mobile-prompt-shell { display: none; }
  .mobile-prompt { min-width: 0; min-height: 118px; max-height: 148px; padding: 10px 0 34px; resize: none; border: 0; outline: 0; background: transparent; color: #273344; font-size: 16px; line-height: 1.5; }
  .mobile-prompt::placeholder { color: #9ba3ac; }
  .mobile-send { position: absolute; right: 12px; bottom: 12px; flex: 0 0 42px; width: 42px; height: 42px; margin-left: auto; border-radius: 50%; background: #dbeeff; color: #8bb9e8; font-size: 27px; line-height: 1; }
  .mobile-send[disabled] { opacity: .6; }
  .mobile-bottom-nav { position: fixed; z-index: 20; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 520px; margin: 0 auto; padding: 6px; border: 1px solid #e2e7ef; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 8px 28px rgba(44, 55, 82, .12); backdrop-filter: blur(18px); }
  .mobile-bottom-nav button { display: grid; justify-items: center; gap: 3px; min-height: 48px; border-radius: 15px; background: transparent; color: #8491a0; }
  .mobile-bottom-nav button span { font-size: 20px; line-height: 1; }
  .mobile-bottom-nav button small { font-size: 11px; }
  .mobile-bottom-nav button.is-active { background: #f1f1ff; color: #5c55e8; font-weight: 700; }
  .mobile-drawer { display: flex; }
  .mobile-drawer-rail { width: 90px; }
  .mobile-drawer-card { left: 90px; width: min(320px, calc(100vw - 90px)); }
  .mobile-sheet-card { right: auto; bottom: 132px; left: 50%; width: min(500px, calc(100vw - 40px)); max-height: min(310px, calc(100dvh - 180px)); transform: translateX(-50%); }
}

@media (min-width: 768px) {
  .mobile-app { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .mobile-topbar-title { display: none; }
  .mobile-history-actions { display: none; }
}

/* The phone-browser reference uses a full-bleed conversation surface.  Keep
   this scoped to the mobile page and the result state so the create view and
   desktop workbench retain their existing behavior. */
@media (max-width: 767px) {
  body { background: #fff; }
  .mobile-app { max-width: none; background: #fff; }

  .mobile-app.is-result { padding-bottom: calc(24px + env(safe-area-inset-bottom)); background: #fff; }
  .mobile-app.is-result .mobile-topbar-title,
  .mobile-app.is-result .mobile-heading,
  .mobile-app.is-result .mobile-history-actions,
  .mobile-app.is-result .mobile-bottom-nav { display: none; }
  .mobile-app.is-result .mobile-main {
    width: 100%; max-width: none; margin: 0; padding: 0 16px 20px;
    border: 0; border-radius: 0; background: #fff; box-shadow: none; overflow: visible;
  }
  .mobile-app.is-result .mobile-workspace { min-width: 0; }
  .mobile-conversation-result { min-width: 0; padding-top: 64px; }
  .mobile-conversation-result .mobile-user-bubble { margin-left: auto; }
  .mobile-conversation-result .mobile-generation { margin-top: 80px; }
  .mobile-conversation-result .mobile-generation-meta { margin-bottom: 16px; }
  .mobile-conversation-result .mobile-result { margin: 0 0 36px; border-radius: 18px; box-shadow: none; }
  .mobile-conversation-result .mobile-result img { aspect-ratio: auto; height: auto; max-height: none; object-fit: contain; }
  .mobile-conversation-result .mobile-result-toolbar { right: 12px; bottom: 12px; left: 12px; gap: 8px; }
  .mobile-conversation-result .mobile-result-toolbar button {
    min-height: var(--u-h-md); padding: 0 12px; border-radius: var(--u-radius-sm);
    background: rgba(32, 41, 56, .88); color: #fff; font-size: var(--u-fs-13);
  }
  .mobile-conversation-result .mobile-result-toolbar button:first-child,
  .mobile-conversation-result .mobile-result-toolbar button:nth-child(2) {
    flex: 0 0 48px; padding: 0; font-size: 26px;
  }

  .mobile-composer-compact {
    margin: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  .mobile-composer-compact .mobile-compose-controls {
    margin: 0 0 10px; padding: 0; overflow-x: auto;
  }
  .mobile-composer-compact .mobile-compose-controls .mobile-control,
  .mobile-composer-compact .mobile-cost {
    height: 58px; min-height: 58px; border-radius: 16px; border-color: #dedcff;
    background: #fff; font-size: 14px;
  }
  .mobile-composer-compact .mobile-compose-controls .mobile-control.primary { min-width: 160px; }
  .mobile-composer-compact .mobile-compose-controls .mobile-control:nth-child(2) { min-width: 105px; }
  .mobile-composer-compact .mobile-compose-controls .mobile-control:nth-child(3) { min-width: 78px; }
  .mobile-composer-compact .mobile-cost { min-width: 130px; justify-content: center; }
  .mobile-composer-compact .mobile-compact-input {
    position: relative; display: flex; align-items: center;
    min-height: 54px; height: 54px;
    padding: 0 8px 0 6px; border-radius: 27px; background: #f1f2f4;
  }
  .mobile-composer-compact .mobile-compact-add {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    background: transparent; color: #202938; font-size: 32px; line-height: 1;
  }
  .mobile-composer-compact .mobile-prompt {
    /* 单行高度 54px、行高 26px、上下各 14px：文字正好垂直居中 */
    flex: 1; height: 54px; min-height: 54px; max-height: 54px;
    padding: 14px 10px; margin: 0; resize: none; overflow: hidden;
    color: #7f8791; font-size: 16px; line-height: 26px;
  }
  .mobile-composer-compact .mobile-send {
    position: static; flex: 0 0 48px; width: 48px; height: 48px;
    border-radius: 50%; background: #d8ecff; color: #8bb9e8; font-size: 28px;
  }

  .mobile-app.is-phone-vision .mobile-sheet-backdrop { background: transparent; backdrop-filter: none; }
  .mobile-app.is-phone-vision .mobile-sheet-card {
    right: auto; bottom: 96px; left: 50%; width: min(368px, calc(100vw - 60px));
    max-height: none; padding: 16px 14px; border: 1px solid #9ca4af;
    border-radius: var(--u-radius-lg); background: #fff; box-shadow: 0 10px 30px rgba(30, 41, 57, .14);
    transform: translateX(-50%);
  }
  .mobile-app.is-phone-vision .mobile-sheet-grabber,
  .mobile-app.is-phone-vision .mobile-sheet-head button { display: none; }
  .mobile-app.is-phone-vision .mobile-sheet-head { margin: 0 8px 10px; }
  .mobile-app.is-phone-vision .mobile-sheet-options { gap: 4px; }
  .mobile-app.is-phone-vision .mobile-sheet-options button {
    min-height: var(--u-h-xl); border: 0; border-radius: var(--u-radius-md);
    justify-content: space-between; text-align: left;
  }
  .mobile-app.is-phone-vision .mobile-sheet-options button.is-selected { background: #f2f4f8; color: #202938; }

  .mobile-drawer { padding: 10px; }
  .mobile-drawer-backdrop { z-index: 1; background: rgba(31, 38, 48, .48); backdrop-filter: none; }
  .mobile-drawer-rail {
    position: absolute; z-index: 2; top: 10px; bottom: 10px; left: 10px;
    display: flex; flex-direction: column; align-items: center; width: 80px;
    padding: 10px 10px 12px; border: 1px solid #e2e7ef; border-radius: 24px;
    background: #fff; box-shadow: 0 6px 18px rgba(31, 42, 63, .1);
  }
  .mobile-drawer-rail-logo {
    display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px;
    border-radius: 17px; background: #f7f8fb; color: #202938; font-size: 22px; font-weight: 800;
  }
  .mobile-drawer-rail-logo img { width: 36px; height: 36px; object-fit: contain; }
  .mobile-drawer-rail button {
    display: grid; place-items: center; gap: 3px; width: 60px; min-height: 60px;
    margin-bottom: 8px; border-radius: 17px; background: transparent; color: #8a96a6;
  }
  .mobile-drawer-rail button span { font-size: 22px; }
  .mobile-drawer-rail button small { font-size: 11px; }
  .mobile-drawer-rail button.is-active { background: #f0efff; color: #645cf0; }
  .mobile-drawer-rail-spacer { flex: 1; }
  .mobile-drawer-card {
    z-index: 3; top: 10px; bottom: 10px; left: 106px;
    width: min(295px, calc(100vw - 121px)); padding: 14px 16px;
    border: 1px solid #e2e7ef; border-radius: 24px; background: #fff;
    box-shadow: 0 8px 26px rgba(31, 42, 63, .12);
  }
  .mobile-drawer-card .mobile-task-list { align-content: start; grid-auto-rows: max-content; }
  .mobile-drawer-card .mobile-drawer-logo { display: none; }
  .mobile-drawer-head { margin: 4px 0 16px; }
  .mobile-drawer-head > div:nth-child(2) { margin-left: 0; }
  .mobile-drawer-close { color: #8a96a6; }
  .mobile-drawer-handle {
    position: absolute; z-index: 4; top: 50%; right: -46px; width: 31px; height: 80px;
    transform: translateY(-50%); border: 1px solid #9da5ae; border-left: 0;
    border-radius: 0 14px 14px 0; background: #fff;
  }
  .mobile-drawer-handle span { display: block; width: 2px; height: 54px; margin: 0 auto; background: #77818c; }
  .mobile-drawer-handle { display: flex; align-items: center; justify-content: center; gap: 5px; }
  .mobile-drawer-handle span { margin: 0; }
}

@media (max-width: 767px) {
  .mobile-app.is-phone-vision { padding-bottom: calc(24px + env(safe-area-inset-bottom)); background: #fff; }
  .mobile-app.is-phone-vision .mobile-topbar {
    position: relative; width: 100%; max-width: none; height: 54px; min-height: 54px; flex: 0 0 auto; margin: 0;
    padding: 2px 16px 0; border: 0; border-radius: 0; background: transparent;
    box-shadow: none;
  }
  .mobile-app.is-phone-vision .mobile-menu-trigger { flex-basis: 38px; }
  .mobile-app.is-phone-vision .mobile-topbar-title,
  .mobile-app.is-phone-vision .mobile-heading,
  .mobile-app.is-phone-vision .mobile-history-actions,
  .mobile-app.is-phone-vision .mobile-bottom-nav { display: none; }
  .mobile-app.is-phone-vision .mobile-top-actions { gap: 8px; }
  .mobile-app.is-phone-vision .mobile-credit { width: auto; }
  .mobile-app.is-phone-vision .mobile-more-trigger { padding: 0; border: 0; background: transparent; }
  .mobile-app.is-phone-vision .mobile-main {
    display: flex; flex-direction: column; width: 100%; max-width: none; min-height: calc(100dvh - 60px);
    margin: 0; padding: 16px 16px 20px; border: 0; border-radius: 0;
    background: #fff; box-shadow: none; overflow: visible;
  }
  .mobile-app.is-phone-vision .mobile-workspace { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .mobile-app.is-phone-vision:not(.is-result) .mobile-conversation-empty { flex: 1; min-height: calc(100dvh - 260px); }
  .mobile-app.is-phone-vision .mobile-composer-compact { margin-top: auto; }
  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls {
    width: auto; margin-right: 0; gap: 8px;
  }
  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-cost { padding-inline: 10px; }
  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-send.is-cancel { background: #202938; color: #fff; font-size: 18px; }

  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-compact-input {
    min-height: 54px; height: 54px; margin: 0;
  }
  .mobile-app.is-phone-vision .mobile-sheet-card {
    right: auto; bottom: calc(140px + env(safe-area-inset-bottom)); left: 50%;
    transform: translateX(-50%); animation: none;
  }
  /* 清晰度 / 数量弹窗宽度收窄 50%，模型弹窗宽度不变 */
  .mobile-app.is-phone-vision .mobile-sheet[data-type="resolution"] .mobile-sheet-card,
  .mobile-app.is-phone-vision .mobile-sheet[data-type="count"] .mobile-sheet-card {
    width: min(165px, calc(100vw - 60px));
  }
  .mobile-app.is-phone-vision .mobile-sheet[data-type="model"] .mobile-sheet-card,
  .mobile-app.is-phone-vision .mobile-sheet[data-type="chat-model"] .mobile-sheet-card { min-height: 258px; }
  .mobile-app.is-phone-vision .mobile-sheet[data-type="model"] .mobile-sheet-options button {
    display: flex; align-items: center; min-height: var(--u-h-xl); padding: 0 10px;
  }
  .mobile-sheet-option-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mobile-sheet-option-main > span:last-child { display: grid; gap: 2px; min-width: 0; text-align: left; }
  .mobile-sheet-option-main strong { overflow: hidden; color: #354154; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-sheet-option-main small { overflow: hidden; color: #8d98a6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-sheet-options button > b { margin-left: auto; color: #647083; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .mobile-sheet-option-icon {
    display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px;
    border-radius: 7px; color: #fff; font-size: 8px; font-style: normal; font-weight: 700;
  }
  .mobile-sheet-option-icon.gpt { background: #202938; }
  .mobile-sheet-option-icon.flux { background: #7367f0; }
  .mobile-sheet-option-icon.seedream { background: #4b9cdb; }
  .mobile-app.is-phone-vision .mobile-conversation-result .mobile-result {
    width: min(100%, 441px); max-width: 441px; margin-left: 0;
  }
  .mobile-app.is-phone-vision .mobile-conversation-result .mobile-result-toolbar {
    justify-content: flex-start; right: 12px; bottom: 12px; left: 12px;
  }
  .mobile-app.is-phone-vision .mobile-conversation-result .mobile-result-toolbar .mobile-secondary-action { display: none; }
  .mobile-app.is-phone-vision .mobile-conversation-result .mobile-result-toolbar button[data-mobile-action="download"] {
    flex: 0 0 auto; min-width: 78px; padding: 0 14px; font-size: 14px;
  }
}

/*
 * Phone conversation shell
 *
 * Keep the top bar and composer in the viewport while the conversation itself
 * owns the scroll container.  This mirrors the interaction model users expect
 * from a mobile chat: the prompt never moves away when a result is tall, and
 * the composer remains reachable while scrolling through prior rounds.
 */
@media (max-width: 767px) {
  .mobile-app.is-phone-vision {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
    background: #fff;
  }

  .mobile-app.is-phone-vision .mobile-main {
    height: calc(100dvh - 84px);
    min-height: 0;
    padding-bottom: calc(190px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(190px + env(safe-area-inset-bottom));
  }

  .mobile-app.is-phone-vision .mobile-workspace {
    min-height: 100%;
  }

  .mobile-app.is-phone-vision:not(.is-result) .mobile-conversation-empty {
    min-height: calc(100dvh - 300px);
  }

  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls {
    width: auto;
    margin: 0 0 10px;
    padding-top: 0;
  }

  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-compact-input {
    margin-top: 0;
  }
}

/* Keep the phone conversation viewport and composer as independent surfaces.
 * The viewport owns all message/image scrolling; the composer never enters
 * that scroll flow and remains attached to the visual viewport bottom. */
@media (max-width: 767px) {
  .mobile-app.is-phone-vision {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
  }

  .mobile-app.is-phone-vision .mobile-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 16px 16px 0;
    overflow: hidden;
  }

  .mobile-app.is-phone-vision .mobile-workspace {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .mobile-app.is-phone-vision .mobile-conversation-viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c7ced8 transparent;
    padding-bottom: calc(188px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(188px + env(safe-area-inset-bottom));
  }

  .mobile-app.is-phone-vision .mobile-conversation-viewport::-webkit-scrollbar { width: 7px; }
  .mobile-app.is-phone-vision .mobile-conversation-viewport::-webkit-scrollbar-track { background: transparent; }
  .mobile-app.is-phone-vision .mobile-conversation-viewport::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background: #c7ced8;
    background-clip: padding-box;
  }

  .mobile-app.is-phone-vision .mobile-round + .mobile-round {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #edf0f4;
  }

  .mobile-app.is-phone-vision .mobile-round + .mobile-round .mobile-generation { margin-top: 28px; }

  .mobile-app.is-phone-vision .mobile-composer-compact {
    position: fixed;
    z-index: 24;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-keyboard-offset, 0px));
    width: 95%;
    max-height: calc(100dvh - 120px);
    margin: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    overflow: visible;
    border: 1px solid var(--mobile-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 28px rgba(44, 55, 82, .12);
    backdrop-filter: blur(18px);
  }

  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls {
    width: auto;
    margin: 0 0 10px;
    padding-top: 0;
  }

  .mobile-app.is-phone-vision .mobile-composer-compact .mobile-compact-input {
    margin-top: 0;
  }
}


/* M-01 入口闭环：大屏提示、抽屉桌面版链接、账户面板 */
.mobile-wide-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 12px;
  padding: 10px 12px;
  border: 1px solid #e4e2ff;
  border-radius: 12px;
  background: #f5f4ff;
  color: #4f4b7a;
  font-size: 12px;
  line-height: 1.5;
}
.mobile-wide-hint[hidden] { display: none; }
.mobile-wide-hint a {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--mobile-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.mobile-drawer-desktop-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid var(--mobile-line);
  border-radius: 12px;
  background: #fff;
  color: #4f5f70;
  font-size: 12px;
  text-decoration: none;
}
.mobile-drawer-desktop-link span { color: var(--mobile-accent); }
.mobile-account { display: grid; gap: 2px; }
.mobile-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--mobile-line);
}
.mobile-account-row span { color: var(--mobile-muted); font-size: 12px; }
.mobile-account-row strong { font-size: 13px; font-weight: 700; }
.mobile-account-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
  border-radius: 12px;
  background: var(--mobile-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.mobile-account-note { display: block; margin-top: 10px; color: var(--mobile-muted); font-size: 11px; line-height: 1.6; }
.mobile-account-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid #e7d5d5;
  border-radius: 12px;
  background: #fff;
  color: #b4433c;
  font-size: 13px;
  font-weight: 700;
}
.mobile-account-logout:active { background: #fdf3f2; }

/* 账户面板/短视口：卡片必须可滚动，不能被视口裁掉 */
.mobile-app.is-phone-vision .mobile-sheet-card,
.mobile-sheet-card {
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* M-04 布局缺陷修复：上传区满宽、控件条换行不横滑、输入区不压底栏 */
.mobile-source { width: calc(100% - 24px); }

/* 四个控件必须同一行：放不下就横向滑动，不换行 */
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls {
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls::-webkit-scrollbar { display: none; }
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls > * {
  flex: 0 0 auto;
  height: 44px;
  min-height: 44px;
  white-space: nowrap;
}
/* 控件按内容宽度排布，缩小内边距/字号，让第四个「预计积分」露出一截提示可滑动 */
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls { gap: 6px; }
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls .mobile-control,
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-compose-controls .mobile-cost {
  min-width: 0;
  padding-inline: 9px;
  font-size: 13px;
}
/* 模型名可能很长（如 Gemini Nano Banana）：限宽省略，保证第四个控件能露出一截 */
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-control.primary {
  max-width: 152px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-app.is-phone-vision .mobile-composer-compact .mobile-cost {
  justify-content: flex-start;
  padding-inline: 4px;
}

.mobile-app:not(.is-phone-vision) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* 输入区固定在底栏上方；滚动区按输入区实测高度预留，内容可以完整滚到输入区之上 */
.mobile-app:not(.is-phone-vision) .mobile-main {
  padding-bottom: calc(var(--mobile-composer-h, 220px) + 16px);
}
.mobile-app:not(.is-phone-vision) .mobile-composer {
  position: fixed;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 496px);
  bottom: calc(78px + var(--mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom));
}

/* 控件条统一单行：放不下时横向滚动（分层设计 / AI 对话同规则） */
.mobile-compose-controls {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.mobile-compose-controls > * { flex: 0 0 auto; }
.mobile-compose-controls .mobile-control { max-width: none; white-space: nowrap; }
.mobile-compose-controls .mobile-cost { min-width: 0; min-height: 40px; justify-content: flex-start; white-space: nowrap; }

/* M-05 iOS 聚焦缩放：输入控件字号必须 >=16px，否则 Safari 会放大整页 */
@media (max-width: 767px) {
  .mobile-auth-card input,
  .mobile-task-search input,
  .mobile-prompt,
  .mobile-auth-card input::placeholder,
  .mobile-task-search input::placeholder {
    font-size: 16px;
  }
}

/* 会话滚动区按输入区实测高度预留，避免结果/下载按钮被压住 */
.mobile-app.is-phone-vision .mobile-conversation-viewport {
  padding-bottom: calc(var(--mobile-composer-h, 200px) + 24px + env(safe-area-inset-bottom));
  scroll-padding-bottom: calc(var(--mobile-composer-h, 200px) + 24px);
}

/* 短视口下账户面板：同特异性覆盖固定 232px 的 bottom 定位 */
.mobile-app.is-phone-vision .mobile-sheet-card {
  max-height: calc(100dvh - 246px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* M-10 功能边界提示：写清手机端与桌面端的能力差异，避免用户以为功能缺失 */
.mobile-account-boundary {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--mobile-line);
  border-radius: 12px;
  background: #fafbfd;
}
.mobile-account-boundary strong { display: block; font-size: 12px; color: #3c4a5c; }
.mobile-account-boundary p { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.mobile-account-boundary p span {
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--mobile-line);
  color: #5b6a7b;
  font-size: 11px;
}
.mobile-account-boundary small { display: block; color: var(--mobile-muted); font-size: 11px; line-height: 1.6; }

/* M-12 失败重试条：网络/超时失败给出可读原因与一键重试 */
.mobile-retry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 12px;
  padding: 11px 12px;
  border: 1px solid #f0d9d2;
  border-radius: 12px;
  background: #fdf4f1;
  color: #8a4a37;
  font-size: 12px;
  line-height: 1.5;
}
.mobile-retry button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  background: #b4433c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* M-13 横屏平板/手机：解除 520px 手机壳限制，输入区回到文档流，避免被挤出视口 */
@media (min-width: 768px) and (max-height: 560px) {
  body { padding: 0; }
  .mobile-app {
    max-width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .mobile-app .mobile-main { max-width: 100%; padding: 16px 16px 12px; }
  .mobile-app:not(.is-phone-vision) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mobile-app:not(.is-phone-vision) .mobile-main { padding-bottom: calc(var(--mobile-composer-h, 150px) + 24px); }
  /* 横屏高度只有 390：输入区压扁后固定在底栏上方，给标题与切换按钮让出空间 */
  .mobile-app .mobile-composer:not(.mobile-composer-compact) {
    position: fixed;
    right: 12px;
    bottom: calc(74px + var(--mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-width: 760px;
    margin: 0 auto;
    padding: 8px;
    transform: none;
  }
  /* 横屏面板里已有「上传原图 / 添加参考图」按钮，输入区内的参考图卡直接收掉，省出 100px 高度 */
  .mobile-app .mobile-prompt-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    min-height: 72px;
    padding: 8px;
    align-items: center;
  }
  .mobile-app .mobile-prompt-card .mobile-reference-tile { display: none; }
  .mobile-app .mobile-prompt-card .mobile-prompt {
    height: 56px; min-height: 56px; max-height: 56px;
    padding: 4px 0 !important; resize: none;
  }
  .mobile-app .mobile-prompt-card .mobile-send { width: 38px; height: 38px; }
  /* 横屏同样套用统一尺子，不再回落到桌面尺寸 */
  .mobile-app .mobile-topbar { height: 54px; padding: 2px 16px 0; }
  .mobile-app .mobile-menu-trigger { width: 38px; height: 38px; border-radius: var(--u-radius-md); }
  .mobile-app .mobile-credit { min-width: 76px; height: 34px; border-radius: var(--u-radius-md); font-size: var(--u-fs-12); }
  .mobile-app .mobile-credit b { font-size: var(--u-fs-14); }
  .mobile-app .mobile-more-trigger { width: 38px; height: 38px; border-radius: var(--u-radius-md); font-size: var(--u-fs-16); }
  .mobile-app .mobile-top-actions { margin-left: auto; gap: 8px; }
  .mobile-app .mobile-heading h1 { font-size: 22px; letter-spacing: -.04em; }
  .mobile-app .mobile-mode-tabs { padding: 3px; border-radius: var(--u-radius-md); }
  .mobile-app .mobile-mode-tabs button { min-height: var(--u-h-md); padding: 0 12px; border-radius: var(--u-radius-sm); font-size: var(--u-fs-13); }
  /* 横屏高度有限：历史入口收进抽屉，保证标题与切换按钮可见 */
  .mobile-app .mobile-history-actions { display: none; }
  .mobile-app .mobile-history-button { min-height: var(--u-h-lg); border-radius: var(--u-radius-md); font-size: var(--u-fs-13); }
  /* 横屏高度紧张：底栏统一隐藏（导航走抽屉），把 63px 让给内容 */
  .mobile-app .mobile-bottom-nav { display: none; }
  .mobile-app:not(.is-phone-vision) { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .mobile-app .mobile-composer:not(.mobile-composer-compact) { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .mobile-app .mobile-bottom-nav {
    right: 0;
    left: 0;
    max-width: none;
    z-index: 26;
  }
}

/* 横屏下生图页的紧凑输入区同样要常驻底部，否则会被排到文档末尾 */
@media (min-width: 768px) and (max-height: 560px) {
  .mobile-app.is-phone-vision .mobile-main { max-width: 760px; margin: 0 auto; padding: 0 20px; }
  .mobile-app.is-phone-vision .mobile-composer-compact {
    position: fixed;
    z-index: 24;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--mobile-line);
  }
  .mobile-app.is-phone-vision .mobile-conversation-viewport {
    padding-bottom: calc(var(--mobile-composer-h, 160px) + 16px);
  }
  /* 横屏不在手机断点内：会话壳的隐藏项与 compact 输入尺寸要显式补齐 */
  .mobile-app.is-phone-vision .mobile-heading,
  .mobile-app.is-phone-vision .mobile-section-tabs { display: none; }
  .mobile-app.is-phone-vision .mobile-compact-input { min-height: 54px; height: 54px; }
  .mobile-app.is-phone-vision .mobile-compact-input .mobile-prompt {
    height: 54px; min-height: 54px; max-height: 54px;
    padding: 14px 10px; line-height: 26px;
  }
  .mobile-app.is-phone-vision .mobile-compact-input .mobile-send { width: 48px; height: 48px; }
}

/* M-11 省流提示：折叠较早轮次 */
.mobile-history-note {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px dashed var(--mobile-line);
  border-radius: 10px;
  color: var(--mobile-muted);
  font-size: 11px;
  text-align: center;
}

/* 错误条放在输入区内部：不会被固定输入区遮挡 */
.mobile-composer .mobile-retry { margin: 0 0 10px; }
.mobile-composer-compact .mobile-retry { margin: 0 0 10px; }

/* 模型名过长时省略，保留图标与下拉箭头，避免出现被硬裁切的半截字 */
.mobile-control.primary { display: inline-flex; align-items: center; gap: 4px; }
.mobile-control .mobile-model-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .mobile-control.primary > i { flex: 0 0 auto; }

/* 控件条可横向滑动时右侧渐隐，避免用户不知道第四项在屏外 */
.mobile-compose-controls.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}

/* F-01 生图空态引导卡：给新用户第一屏一个明确起点 */
.mobile-conversation-empty .mobile-empty-guide {
  display: grid;
  justify-items: center;
  padding: 40px 20px 20px;
  text-align: center;
}
.mobile-conversation-empty .mobile-empty-mark {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: var(--u-radius-lg); background: var(--mobile-accent-soft); color: var(--mobile-accent); font-size: 26px;
}
.mobile-empty-guide strong { font-size: var(--u-fs-16); }
.mobile-empty-guide p { max-width: 260px; margin: 7px 0 16px; color: var(--mobile-muted); font-size: var(--u-fs-12); line-height: 1.6; }
.mobile-example-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mobile-example-chips button {
  min-height: var(--u-h-lg); padding: 0 12px; border: 1px solid var(--mobile-line);
  border-radius: var(--u-radius-md); background: #fff; color: #47596b; font-size: var(--u-fs-12);
}

/* 分层设计输入区：单列输入 + 发送（无参考图/无生图控件） */
.mobile-prompt-card-split { grid-template-columns: minmax(0, 1fr) 42px; min-height: 96px; }

/* O-7 控件条滑到末尾后取消渐隐，避免误导还有更多内容 */
.mobile-compose-controls.is-scrollable.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}