/* ui_ux_patch_k — 仅手机(.drama-surface-phone)：上1/3内容 + 下2/3聊天 */

body.drama-premium .tab-page:not(.active) {
  display: none !important;
}

body.drama-premium .tab-page.active {
  display: flex !important;
  flex-direction: column !important;
}

/* 手机：由 JS 标记 drama-surface-phone，不用宽泛 media 误伤 PC Chrome */
body.drama-premium.drama-surface-phone {
  --drama-viewport-h: auto !important;
  --drama-viewport-media-h: auto !important;
  --drama-form-min-h: 0 !important;
  --drama-panel-max-h: none !important;
  overscroll-behavior-x: none;
}

body.drama-premium.drama-surface-phone .drama-scroll,
body.drama-premium.drama-surface-phone .drama-tabs .tab-bar,
body.drama-premium.drama-surface-phone .agent-dock-log {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

body.drama-premium.drama-surface-phone .drama-tabs .tab-bar {
  scroll-snap-type: none;
}

body.drama-premium.drama-surface-phone .drama-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body.drama-premium.drama-surface-phone .drama-header,
body.drama-premium.drama-surface-phone .drama-tabs,
body.drama-premium.drama-surface-phone .drama-chrome {
  flex: 0 0 auto !important;
}

body.drama-premium.drama-surface-phone .drama-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.drama-premium.drama-surface-phone .tab-page.active {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.drama-premium.drama-surface-phone .tab-page.active .drama-card-fill,
body.drama-premium.drama-surface-phone #page-params .drama-card-fill,
body.drama-premium.drama-surface-phone #page-idea .drama-card-fill {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.drama-premium.drama-surface-phone .drama-page-viewport,
body.drama-premium.drama-surface-phone .drama-text-viewport {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

body.drama-premium.drama-surface-phone .drama-force-next-bar {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

body.drama-premium .drama-force-next-bar {
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

body.drama-premium .drama-review-mode-switch,
body.drama-premium .review-mode-btn {
  pointer-events: auto;
  touch-action: manipulation;
}

.review-mode-btn.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

body.drama-premium.drama-surface-phone .drama-agent-dock {
  flex: 2 2 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.drama-premium.drama-surface-phone .agent-dock-head,
body.drama-premium.drama-surface-phone .agent-dock-composer,
body.drama-premium.drama-surface-phone .agent-dock-busy,
body.drama-premium.drama-surface-phone .agent-dock-alerts {
  flex: 0 0 auto !important;
}

body.drama-premium.drama-surface-phone .agent-dock-log {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.drama-premium.drama-surface-phone .drama-viewport-resize {
  display: none !important;
}

body.drama-premium.drama-surface-phone .drama-surface-badge--pc,
body.drama-premium.drama-surface-phone .drama-mobile-link {
  display: none !important;
}

/* PC Chrome：恢复桌面分栏，避免被手机 flex 污染 */
/* 手机访问 /drama（未加 drama-surface-phone 时）：禁止横滑触发浏览器返回 */
@media (max-width: 768px) {
  html.drama-layout-compat,
  body.drama-page.drama-premium,
  body.drama-page.drama-premium.drama-swipe-guard {
    overscroll-behavior: none;
    overscroll-behavior-x: none;
  }

  body.drama-page.drama-premium .drama-shell,
  body.drama-page.drama-premium .drama-scroll,
  body.drama-page.drama-premium .agent-dock-log,
  body.drama-page.drama-premium .drama-page-viewport,
  body.drama-page.drama-premium .drama-text-viewport,
  body.drama-page.drama-premium .tab-page.active {
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
  }

  body.drama-page.drama-premium .drama-tabs .tab-bar {
    scroll-snap-type: none !important;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
}

@media (min-width: 769px) {
  body.drama-premium.drama-surface-desktop .drama-shell,
  body.drama-premium:not(.drama-surface-phone) .drama-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.drama-premium.drama-surface-desktop .drama-scroll,
  body.drama-premium:not(.drama-surface-phone) .drama-scroll {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: min(46vh, 480px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.drama-premium.drama-surface-desktop .drama-agent-dock,
  body.drama-premium:not(.drama-surface-phone) .drama-agent-dock {
    flex: 1 1 0 !important;
    min-height: min(38vh, 320px) !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.drama-premium.drama-surface-desktop .agent-dock-log,
  body.drama-premium:not(.drama-surface-phone) .agent-dock-log {
    flex: 1 1 0 !important;
    min-height: 96px !important;
    max-height: none !important;
  }
}

.outline-plot-choice {
  border: 0;
  margin: 12px 0 4px;
  padding: 0;
  text-align: left;
}

.outline-plot-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.outline-plot-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  color: var(--text, #f1f5f9);
}

.outline-plot-radio input {
  margin-top: 3px;
  flex-shrink: 0;
}

body.drama-premium .agent-text-input-btn.is-active {
  color: var(--primary-light, #60a5fa) !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
  background: rgba(59, 130, 246, 0.14) !important;
}

body.drama-premium #agentChatInput:not(.is-text-unlocked) {
  cursor: default;
}