/* 诗原手机端界面层：只在 ≤900px 生效。结构与交互以 2026-06-23 手机端样板为准。 */
:root {
  --sy-safe-t: env(safe-area-inset-top, 0px);
  --sy-safe-b: env(safe-area-inset-bottom, 0px);
  --sy-tabbar-h: 64px;
  --sy-spring: cubic-bezier(.34, 1.32, .5, 1);
}

.sy-tabbar,
.mobile-me,
.lib-seg,
.xie-fx-mobile-head,
.xie-fx-mobile-btn,
.xie-fx-scrim,
.xie-mode-switch,
.panel-scrim { display: none; }
.lib-title-seed,
.lib-title-line,
.lib-title-meta { display: none; }
.lib-title-copy { display: contents; }

@media (max-width: 900px) {
  * { -webkit-tap-highlight-color: transparent; }
  #viewport, #viewport.dragging, .poem, .poem[data-lod="mote"], .poem[data-lod="seed"] { cursor: auto; }
  #lantern, #lantern-core { display: none !important; }
  /* 主导航 */
  .sy-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--sy-tabbar-h) + var(--sy-safe-b));
    padding-bottom: var(--sy-safe-b);
    border-top: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-bg) 78%, transparent);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    transition: transform var(--dur-3) var(--ease-out);
  }
  .sy-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 0; min-height: 44px; border: 0; background: transparent;
    color: var(--c-dim); font-family: var(--font); cursor: pointer;
    transition: color var(--dur-2) var(--ease-soft);
  }
  .sy-tab-ico { width: 23px; height: 23px; display: grid; place-items: center; transition: transform var(--dur-2) var(--sy-spring); }
  .sy-tab-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .sy-tab-lbl { font-size: 9px; letter-spacing: .24em; }
  .sy-tab.active { color: var(--c-accent); }
  .sy-tab.active .sy-tab-ico { transform: translateY(-2px); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-accent) 48%, transparent)); }
  .sy-tab-badge,
  .mobile-me-item-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    place-items: center; font-size: 9px; letter-spacing: 0;
    background: var(--c-accent); color: var(--c-bg);
  }
  .sy-tab-badge { position: absolute; top: 8px; left: calc(50% + 8px); display: grid; }
  .sy-tab-badge[hidden], .mobile-me-item-badge[hidden] { display: none; }
  .sy-tab-ind {
    position: absolute; top: 0; width: 24px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--c-accent) 58%, transparent);
    transition: left var(--dur-3) var(--sy-spring);
  }

  /* 原野 */
  .dock, .space-switch, .paper-nav, body.sy-has-tabbar .site-footer { display: none; }
  .wordmark { top: calc(var(--sy-safe-t) + 22px); left: 24px; }
  .wordmark-title { font-size: 14px; letter-spacing: .5em; }
  .wordmark-sub { margin-top: 8px; font-size: 9px; letter-spacing: .26em; }
  .field-weather-btn { top: calc(var(--sy-safe-t) + 18px); right: 18px; min-height: 44px; }
  .hint { bottom: calc(var(--sy-tabbar-h) + var(--sy-safe-b) + 18px); }
  .focusbar {
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--sy-tabbar-h) + var(--sy-safe-b) + 12px);
    max-width: none; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; padding: 2px; scrollbar-width: none;
  }
  .focusbar::-webkit-scrollbar { display: none; }
  .focusbar .btn { flex: 0 0 auto; min-height: 44px; }
  .toast { bottom: calc(var(--sy-tabbar-h) + var(--sy-safe-b) + 18px); }

  /* 所有旧面板统一为样板底部抽屉 */
  .panel, body.lib-open .panel {
    z-index: 64; left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; max-width: 100%; max-height: 86dvh; overflow-y: auto;
    margin: 0; padding: 16px 24px calc(26px + var(--sy-safe-b));
    border: 0; border-top: 1px solid var(--c-border-mid);
    border-radius: 26px 26px 0 0;
    background: color-mix(in srgb, var(--c-bg2) 97%, transparent);
    backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
    box-shadow: 0 -28px 80px -20px color-mix(in srgb, var(--c-bg) 86%, transparent);
    transform: translateY(100%); transform-origin: bottom center;
    transition: transform var(--dur-3) var(--sy-spring);
  }
  .panel.open, body.lib-open .panel.open { transform: translateY(var(--panel-drag-y, 0)); }
  .panel.dragging { transition: none; user-select: none; }
  .panel-drag-handle {
    display: block; width: 72px; height: 26px; margin: -8px auto 4px; padding: 0;
    border: 0; background: transparent; touch-action: none;
  }
  .panel-drag-handle::after {
    content: ''; display: block; width: 40px; height: 4px; margin: auto;
    border-radius: 4px; background: var(--c-border-mid);
  }
  .panel-scrim {
    position: fixed; inset: 0; z-index: 63; border: 0;
    background: color-mix(in srgb, var(--c-bg) 58%, transparent);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-soft);
  }
  .panel-scrim.open { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
  .panel .btn, .panel .field-input, .panel select.field-input { min-height: 44px; }
  .panel[data-panel="identity"][data-mobile-section="inbox"] .identity-account-box { display: none; }
  .panel[data-panel="identity"][data-mobile-section="account"] .identity-inbox-box { display: none; }
  .panel[data-panel="settings"][data-mobile-section="theme"] .settings-key-box,
  .panel[data-panel="settings"][data-mobile-section="theme"] .settings-lab-box,
  .panel[data-panel="settings"][data-mobile-section="key"] .settings-theme-box,
  .panel[data-panel="settings"][data-mobile-section="key"] .settings-lab-box { display: none; }

  /* 独立「我」页 */
  .mobile-me {
    position: fixed; inset: 0 0 calc(var(--sy-tabbar-h) + var(--sy-safe-b)) 0; z-index: 36;
    display: block; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: 28px;
    background: linear-gradient(to bottom, var(--c-bg2), var(--c-bg));
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px) scale(.992);
    transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-3) var(--ease-out);
  }
  .mobile-me.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .mobile-me-hero { padding: calc(var(--sy-safe-t) + 38px) 28px 0; }
  .mobile-me-id { display: flex; align-items: center; gap: 18px; }
  .mobile-me-avatar {
    width: 66px; height: 66px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--c-border-accent); color: var(--c-accent); font-size: 24px; font-weight: 200;
    background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 70%);
    box-shadow: 0 0 40px -10px color-mix(in srgb, var(--c-accent) 30%, transparent);
  }
  .mobile-me-name { font-size: 22px; font-weight: 300; letter-spacing: .12em; }
  .mobile-me-tier { margin-top: 7px; font-size: 10px; letter-spacing: .22em; color: var(--c-accent); }
  .mobile-me-quota { margin: 30px 28px 0; }
  .mobile-me-quota-line { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 10px; letter-spacing: .2em; color: var(--c-dim); }
  .mobile-me-quota-track { height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--c-text) 8%, transparent); }
  .mobile-me-quota-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--c-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--c-accent) 48%, transparent); transition: width .9s var(--ease-out); }
  .mobile-me-list { margin: 32px 14px 0; }
  .mobile-me-item {
    position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 58px;
    padding: 18px 14px; border: 0; background: transparent; color: var(--c-text); text-align: left; font-family: var(--font);
  }
  .mobile-me-item:not(:last-child)::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: var(--c-border); }
  .mobile-me-item-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--c-dim); }
  .mobile-me-item-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .mobile-me-item-label { flex: 1; font-size: 16px; font-weight: 300; letter-spacing: .06em; }
  .mobile-me-item-value { font-size: 13px; color: var(--c-dim); letter-spacing: .1em; white-space: nowrap; }
  .mobile-me-item-badge { display: grid; }
  .mobile-me-item-chevron { color: color-mix(in srgb, var(--c-dim) 50%, transparent); font-size: 16px; }
  .mobile-me-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 34px 24px 8px; font-size: 10px; line-height: 1.8; color: var(--c-dim); }
  .mobile-me-footer a { color: inherit; }

  /* 写诗页：样板的舞台卡、正文、横滑磁贴、吸底动作条 */
  .xie-overlay {
    display: block; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(var(--sy-tabbar-h) + var(--sy-safe-b) + 78px);
    background: color-mix(in srgb, var(--c-bg) 96%, transparent);
    transition: opacity .35s var(--ease-soft);
  }
  .xie-overlay { scrollbar-width: none; }
  .xie-overlay::-webkit-scrollbar { width: 0; }
  .xie-bar {
    position: sticky; top: 0; z-index: 8; height: auto; min-height: calc(var(--sy-safe-t) + 50px);
    padding: calc(var(--sy-safe-t) + 16px) 26px 14px;
    background: linear-gradient(to bottom, var(--c-bg) 58%, transparent);
  }
  .xie-bar-title { font-size: 10px; letter-spacing: .4em; }
  .xie-mode-switch {
    display: flex; align-items: center; gap: 2px; padding: 3px;
    border: 1px solid var(--c-border); border-radius: 999px;
    background: color-mix(in srgb, var(--c-bg2) 72%, transparent);
  }
  .xie-mode-btn {
    min-width: 54px; height: 32px; padding: 0 13px; border: 0; border-radius: 999px;
    background: transparent; color: var(--c-dim); font: 11px var(--font); letter-spacing: .16em;
  }
  .xie-mode-btn.active { background: var(--c-text); color: var(--c-bg); }
  .xie-close { display: none; }
  .xie-stage {
    position: relative; width: auto; height: clamp(200px, 27dvh, 260px); min-height: 200px;
    margin: 6px 18px 0; padding: 34px 24px 28px; overflow: hidden;
    border: 1px solid var(--c-border); border-radius: 18px;
    background: radial-gradient(80% 70% at 50% 30%, color-mix(in srgb, var(--c-glow) 7%, transparent), transparent 64%), color-mix(in srgb, var(--c-bg2) 34%, transparent);
  }
  .xie-stage::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: .4; }
  .xie-write { display: flex; max-height: none; overflow: visible; padding: 22px 26px 0; border: 0; }
  .xie-overlay[data-mobile-view="write"] .xie-stage,
  .xie-overlay[data-mobile-view="write"] .xie-settings-toggle,
  .xie-overlay[data-mobile-view="write"] .xie-settings-body,
  .xie-overlay[data-mobile-view="write"] .xie-stage-action { display: none; }
  .xie-overlay[data-mobile-view="stage"] .xie-write-top,
  .xie-overlay[data-mobile-view="stage"] .xie-title-label,
  .xie-overlay[data-mobile-view="stage"] .xie-title-input,
  .xie-overlay[data-mobile-view="stage"] .xie-body-wrap,
  .xie-overlay[data-mobile-view="stage"] .xie-drafts-toggle,
  .xie-overlay[data-mobile-view="stage"] .xie-drafts,
  .xie-overlay[data-mobile-view="stage"] .xie-poem-chat-toggle,
  .xie-overlay[data-mobile-view="stage"] .xie-poem-chat { display: none; }
  .xie-overlay[data-mobile-view="stage"] .xie-stage { height: clamp(360px, 58dvh, 560px); }
  .xie-overlay[data-mobile-view="stage"] .xie-write { padding-top: 12px; }
  .xie-write-top { margin-bottom: 4px; }
  .xie-title-input { font-size: 22px; font-weight: 300; padding: 10px 0; }
  .xie-body-wrap { min-height: 190px; margin-bottom: 10px; }
  .xie-body { min-height: 170px; font-size: 18px; font-weight: 200; line-height: 2.5; letter-spacing: .08em; }
  .xie-settings-grid { display: flex; grid-template-columns: none; gap: 10px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: none; }
  .xie-settings-toggle { display: none; }
  .xie-settings-body { max-height: none; overflow: visible; }
  .xie-settings-grid::-webkit-scrollbar { display: none; }
  .xie-settings-grid > * { flex: 0 0 auto; min-width: 96px; }
  .xie-setting-tile { min-height: 72px; padding: 12px 16px; border-radius: 14px; }
  .xie-fx {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 72; display: block;
    width: 100%; max-height: 86dvh; padding: 16px 24px calc(26px + var(--sy-safe-b)); overflow-y: auto;
    border: 0; border-top: 1px solid var(--c-border-mid); border-radius: 26px 26px 0 0;
    background: color-mix(in srgb, var(--c-bg2) 97%, transparent);
    box-shadow: 0 -28px 80px -20px color-mix(in srgb, var(--c-bg) 86%, transparent);
    transform: translateY(105%); visibility: hidden;
    transition: transform var(--dur-3) var(--sy-spring), visibility var(--dur-3);
  }
  .xie-fx.mobile-open { transform: none; visibility: visible; }
  .xie-fx-mobile-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; font-size: 10px; letter-spacing: .34em; color: var(--c-accent); }
  .xie-fx-mobile-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-border); color: var(--c-dim); font-size: 18px; }
  .xie-fx-scrim { position: fixed; inset: 0; z-index: 71; border: 0; background: color-mix(in srgb, var(--c-bg) 62%, transparent); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; }
  .xie-fx-scrim.open { display: block; opacity: 1; visibility: visible; }
  .xie-fx-mobile-btn { display: inline-flex; }
  .xie-atoms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xie-atom { min-height: 72px; aspect-ratio: 1; border-radius: 14px; }
  .xie-intensity-btn { min-height: 44px; }
  .xie-actions {
    position: fixed; left: 0; right: 0; bottom: calc(var(--sy-tabbar-h) + var(--sy-safe-b)); z-index: 48;
    display: flex; width: 100%; height: 58px; padding: 0 18px; justify-content: flex-start; overflow-x: auto;
    border-top: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-bg2) 84%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); scrollbar-width: none;
  }
  .xie-actions::-webkit-scrollbar { display: none; }
  .xie-act-btn { flex: 0 0 auto; min-height: 44px; }

  /* 诗集：今日诗卡置顶，案头/公共原野分段 */
  .lib-overlay { padding-bottom: calc(var(--sy-tabbar-h) + var(--sy-safe-b)); }
  .lib-bar { height: auto; min-height: calc(var(--sy-safe-t) + 54px); padding: calc(var(--sy-safe-t) + 18px) 26px 4px; }
  .lib-bar-title { font-size: 24px; font-weight: 400; letter-spacing: .36em; padding-left: .36em; }
  .lib-bar-sub { display: inline; font-size: 9px; }
  .lib-bar-acts { display: none; }
  .halls { display: flex; flex-direction: column; gap: 0; overflow-y: auto; padding: 0 0 18px; }
  .hall { flex: 0 0 auto; width: auto; padding: 22px; overflow: visible; }
  .hall-center {
    order: -2; min-height: 62dvh; margin: 16px 18px 0; padding: 40px 26px 30px;
    border: 1px solid var(--c-border); border-radius: 22px; overflow: hidden;
    background: radial-gradient(100% 80% at 70% 0, color-mix(in srgb, var(--c-glow) 10%, transparent), transparent 60%), color-mix(in srgb, var(--c-bg2) 46%, transparent);
  }
  .hall-center .hall-kicker { top: 40px; left: 26px; }
  .hall-center .hall-accent-line { top: 0; left: 26px; right: 26px; }
  .hall-center .lib-stage-zoom { inset: 70px 0 72px; }
  .hall-center .lib-actionbar { left: 24px; right: 24px; bottom: 22px; }
  .daily-title { font-size: 46px; font-weight: 200; letter-spacing: .05em; line-height: 1.1; margin-bottom: 22px; }
  .daily-line { font-size: 18px; font-weight: 200; line-height: 2.5; letter-spacing: .1em; }
  .daily-author { margin-top: 22px; font-size: 12px; }
  .lib-seg {
    position: relative; order: -1; display: flex; gap: 4px; margin: 30px 22px 6px; padding: 4px;
    border: 1px solid var(--c-border); border-radius: 999px; background: color-mix(in srgb, var(--c-bg2) 40%, transparent);
  }
  .lib-seg-slide { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border: 1px solid var(--c-border-accent); border-radius: 999px; background: var(--c-accent-low); transition: transform var(--dur-2) var(--sy-spring); }
  .lib-seg.show-public .lib-seg-slide { transform: translateX(100%); }
  .lib-seg button { position: relative; z-index: 1; flex: 1; min-height: 42px; border: 0; background: transparent; color: var(--c-dim); font-family: var(--font); font-size: 13px; letter-spacing: .2em; }
  .lib-seg button.active { color: var(--c-accent); }
  .hall-left, .hall-right { padding: 8px 14px 18px; border: 0; }
  .lib-overlay[data-lib-tab="desk"] .hall-right,
  .lib-overlay[data-lib-tab="public"] .hall-left { display: none; }
  .hall-kicker-row, .hall-left > .hall-kicker { padding: 0 8px; margin: 22px 0 4px; }
  .hall-left > .hall-accent-line, .hall-right > .hall-accent-line { display: none; }
  .lib-title-item {
    position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px;
    padding: 18px 12px; text-align: left; border-radius: 12px;
  }
  .lib-title-item::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: var(--c-border); }
  .lib-title-seed { display: block; flex: 0 0 42px; font-size: 32px; font-weight: 200; text-align: center; color: color-mix(in srgb, var(--c-text) 78%, transparent); }
  .lib-title-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; }
  .lib-title-name { font-size: 17px; letter-spacing: .1em; }
  .lib-title-line { display: block; margin-top: 5px; overflow: hidden; color: var(--c-dim); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  .lib-title-meta { display: flex; flex: 0 0 auto; flex-direction: column; gap: 5px; color: color-mix(in srgb, var(--c-dim) 60%, transparent); font-size: 10px; text-align: right; }
  .lib-title-acts { position: absolute; right: 12px; bottom: 4px; }
  .draft-row, .draft-list, .hall-left > .lib-write { margin-left: 8px; margin-right: 8px; }
}

@media (max-width: 420px) {
  .wordmark-sub { display: none; }
  .mobile-me-item { gap: 13px; }
  .mobile-me-item-label { font-size: 15px; }
  .mobile-me-item-value { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .daily-title { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .sy-tab-ind, .mobile-me, .panel, .xie-fx, .lib-seg-slide { transition-duration: .01ms !important; }
}