/**
 * StoryOS｜短剧风向标系统 Core CSS V1.0
 * 公共基础层：设计变量、全屏 shortcode 模式兜底、通用滚动条、顶栏/卡片/按钮视觉变量。
 */
:root {
  --wv-bg: #edf0f5;
  --wv-card: #ffffff;
  --wv-text: #1a1a2e;
  --wv-text-soft: #3f4658;
  --wv-muted: #7a8294;
  --wv-faint: #a8b0bf;
  --wv-line: #e5e7eb;
  --wv-line-soft: #eef1f5;
  --wv-mint-weak: #edf8f5;
  --wv-mint-mid: #f5fbfa;
  --wv-mint-line: #dceee8;
  --wv-accent: #2db88a;
  --wv-accent-deep: #0f6e56;
  --wv-blue: #7083df;
  --wv-red: #f43f5e;
  --wv-amber: #d4900a;
  --wv-radius-topbar: 16px;
  --wv-radius-card: 18px;
  --wv-radius-pill: 999px;
  --wv-gap-col: 12px;
  --wv-topbar-h: 52px;
  --wv-shadow-soft: 0 8px 24px rgba(15,23,42,.05);
  --wv-shadow-card: 0 10px 28px rgba(15,23,42,.06);
  --wv-font: -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* StoryOS 字号宪法 */
  --wv-fz-title: 16px;
  --wv-fz-body: 14px;
  --wv-fz-meta: 12px;
  --wv-fz-tiny: 11px;
}

/* 🚨 核心修复五：解除风向标对全局 Body 的暴力绑架，彻底消灭切换时的灰底闪屏与菜单消失 */
#dd3-app,
#storyos-signal-shortcode-app,
#storyos-signal-story-app,
#storyos-signal-view-app,
#storyos-drama-library-app {
  background: var(--wv-bg) !important;
}

#dd3-app,
#storyos-signal-shortcode-app,
#storyos-signal-story-app,
#storyos-signal-view-app,
#storyos-drama-library-app {
  font-family: var(--wv-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  
  /* 🚨 核心修改四：将原本属于 body 的霸道样式，安全地局限在插件自己的容器内 */
  background: var(--wv-bg) !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

#dd3-app *,
#storyos-signal-shortcode-app *,
#storyos-signal-story-app *,
#storyos-signal-view-app *,
#storyos-drama-library-app * {
  box-sizing: border-box;
}

/* 统一中栏与右栏之间只保留一个来源的呼吸间距。 */
.sg-main-col,
.ss-main-col,
.sv-main-col,
.dl-main-col,
.dd3-main-col {
  padding-right: var(--wv-gap-col) !important;
}

.sg-right-col,
.ss-right-col,
.sv-right-col,
.dl-right-col,
.dd3-right-col {
  border-left: none !important;
  background: transparent !important;
  padding-left: 0 !important;
}

/* 顶栏统一兜底：保留各页面个性，只把大方向拉齐。 */
.sg-topbar,
.ss-topbar,
.sv-topbar,
.dl-topbar,
.dd3-topbar {
  min-height: var(--wv-topbar-h);
  background: linear-gradient(135deg,var(--wv-mint-weak) 0%,var(--wv-mint-mid) 58%,#fbfdfd 100%);
  border-color: var(--wv-mint-line);
  border-radius: var(--wv-radius-topbar);
}

/* 公共卡片/按钮变量兜底，后续模板化时可逐步接入。 */
.storyos-windvane-card {
  background: var(--wv-card);
  border: 1px solid var(--wv-line-soft);
  border-radius: var(--wv-radius-card);
  box-shadow: var(--wv-shadow-soft);
}
.storyos-windvane-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--wv-radius-pill);
  border: 1px solid var(--wv-line);
  background: #fff;
  color: var(--wv-text-soft);
  font-size: var(--wv-fz-meta);
  font-weight: 700;
  cursor: pointer;
}
.storyos-windvane-btn:hover {
  border-color: var(--wv-mint-line);
  color: var(--wv-accent-deep);
}

/* 统一隐藏应用内滚动条外观，保留滚动能力。 */
.sg-content,
.ss-content,
.sv-content,
.dl-content,
.dd3-content,
.sg-right-col,
.ss-right-col,
.sv-right-col,
.dl-right-col,
.dd3-right-col {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sg-content::-webkit-scrollbar,
.ss-content::-webkit-scrollbar,
.sv-content::-webkit-scrollbar,
.dl-content::-webkit-scrollbar,
.dd3-content::-webkit-scrollbar,
.sg-right-col::-webkit-scrollbar,
.ss-right-col::-webkit-scrollbar,
.sv-right-col::-webkit-scrollbar,
.dl-right-col::-webkit-scrollbar,
.dd3-right-col::-webkit-scrollbar {
  display: none;
}

.storyos-windvane-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(10px);
  z-index: 2147483600;
  padding: 9px 13px;
  border-radius: var(--wv-radius-pill);
  background: rgba(20,28,38,.88);
  color: #fff;
  font-size: var(--wv-fz-meta);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
}
.storyos-windvane-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.storyos-windvane-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 2147483600;
  background: linear-gradient(90deg,var(--wv-accent),var(--wv-blue));
  transition: width .22s ease, opacity .22s ease;
  opacity: 0;
}
.storyos-windvane-loading-bar.is-active {
  width: 72%;
  opacity: 1;
}
.storyos-windvane-loading-bar.is-done {
  width: 100%;
  opacity: 0;
}

/* =========================================================
 * V2.0 追踪雷达公共 UI
 * 保持 StoryOS Mist 风格：轻量、小按钮、低干扰。
 * ========================================================= */
.storyos-track-btn{
    appearance:none!important;
    border:1px solid #c6efe9!important;
    background:#e8faf7!important;
    color:#0f6e56!important;
    border-radius:999px!important;
    height:30px!important;
    padding:0 12px!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    white-space:nowrap!important;
    transition:all .18s ease!important;
}
.storyos-track-btn:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 4px 12px rgba(45,184,138,.16)!important;
}
.storyos-track-btn.is-tracked{
    background:#f4f5fb!important;
    border-color:#eef0f7!important;
    color:#6B6B9A!important;
    box-shadow:none!important;
}
.storyos-track-btn.is-loading{
    opacity:.62!important;
    pointer-events:none!important;
}
.storyos-track-btn-mini{
    height:24px!important;
    padding:0 9px!important;
    font-size:11px!important;
    font-weight:800!important;
}
.storyos-track-btn-topbar{
    height:30px!important;
    margin-left:6px!important;
}
.storyos-tracking-radar-card .storyos-tracking-empty{
    font-size:13px!important;
    line-height:1.65!important;
    color:#6B6B9A!important;
    background:#f8f9fc!important;
    border:1px solid #eef0f7!important;
    border-radius:12px!important;
    padding:12px 14px!important;
}
.storyos-tracking-row{
    cursor:pointer!important;
}
.storyos-tracking-row:hover div:first-child > div:first-child{
    color:#2db88a!important;
}

/* =========================================================
 * V2.1 右栏信息密度控制
 * 右栏只展示摘要；完整列表统一用弹窗查看，避免模块无限变高。
 * ========================================================= */
.storyos-right-summary-card{
    overflow:hidden!important;
}
.storyos-right-card-more{
    width:100%!important;
    margin-top:10px!important;
    border:1px solid #E8ECF4!important;
    background:#F8FAFC!important;
    color:#6B6B9A!important;
    border-radius:12px!important;
    min-height:34px!important;
    padding:0 12px!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1!important;
    cursor:pointer!important;
    transition:all .18s ease!important;
}
.storyos-right-card-more:hover{
    border-color:#C6EFE9!important;
    background:#E8FAF7!important;
    color:#0F6E56!important;
}
.storyos-right-modal{
    position:fixed!important;
    inset:0!important;
    z-index:2147483550!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    padding:24px!important;
}
.storyos-right-modal.is-open{
    display:flex!important;
}
.storyos-right-modal-mask{
    position:absolute!important;
    inset:0!important;
    background:rgba(15,23,42,.45)!important;
    backdrop-filter:blur(2px)!important;
}
.storyos-right-modal-panel{
    position:relative!important;
    width:min(720px,92vw)!important;
    max-height:min(760px,84vh)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#FFFFFF!important;
    border:1px solid #EEF0F7!important;
    border-radius:24px!important;
    box-shadow:0 24px 80px rgba(15,23,42,.22)!important;
}
.storyos-right-modal-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding:22px 24px 18px!important;
    border-bottom:1px solid #EEF0F7!important;
    background:linear-gradient(135deg,#F5FBFA 0%,#FFFFFF 72%)!important;
}
.storyos-right-modal-title{
    font-size:18px!important;
    font-weight:800!important;
    line-height:1.4!important;
    color:#050038!important;
}
.storyos-right-modal-sub{
    margin-top:4px!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.65!important;
    color:#6B6B9A!important;
}
.storyos-right-modal-close{
    width:36px!important;
    height:36px!important;
    border:none!important;
    border-radius:999px!important;
    background:#F4F5FB!important;
    color:#64748B!important;
    font-size:22px!important;
    line-height:1!important;
    cursor:pointer!important;
}
.storyos-right-modal-close:hover{
    background:#E8FAF7!important;
    color:#0F6E56!important;
}
.storyos-right-modal-body{
    padding:16px 20px 22px!important;
    overflow-y:auto!important;
}
.storyos-right-modal-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:14px 4px!important;
    border-bottom:1px solid #EEF0F7!important;
    cursor:pointer!important;
}
.storyos-right-modal-row:last-child{
    border-bottom:none!important;
}
.storyos-right-modal-row:hover .storyos-right-modal-row-title{
    color:#2DB88A!important;
}
.storyos-right-modal-row-main{
    min-width:0!important;
    flex:1!important;
}
.storyos-right-modal-row-title{
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.45!important;
    color:#1A1A40!important;
}
.storyos-right-modal-row-sub{
    margin-top:3px!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.6!important;
    color:#6B6B9A!important;
}
.storyos-right-modal-dot{
    width:9px!important;
    height:9px!important;
    border-radius:999px!important;
    flex-shrink:0!important;
}

/* =========================================================
 * V2.3.4 全风向标页面顶栏固定层
 * 顶栏被 JS 移出滚动容器后，由这里统一保证尺寸、层级和滚动区域高度。
 * ========================================================= */
#storyos-signal-shortcode-app .sg-main-col,
#storyos-signal-story-app .ss-main-col,
#storyos-signal-view-app .sv-main-col,
#storyos-drama-library-app .dl-main-col,
#dd3-app .d3-center{
  display:flex!important;
  flex-direction:column!important;
  height:100vh!important;
  min-height:0!important;
  overflow:hidden!important;
}

#storyos-signal-shortcode-app .sg-content,
#storyos-signal-story-app .ss-content,
#storyos-signal-view-app .sv-content,
#storyos-drama-library-app .dl-content,
#dd3-app .d3-row{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

#dd3-app .d3-row{
  display:flex!important;
}

#storyos-signal-shortcode-app .sg-topbar.storyos-wv-fixed-topbar,
#storyos-signal-story-app .ss-topbar.storyos-wv-fixed-topbar,
#storyos-signal-view-app .sv-topbar.storyos-wv-fixed-topbar,
#storyos-drama-library-app .dl-topbar.storyos-wv-fixed-topbar,
#dd3-app .d3-top.storyos-wv-fixed-topbar{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  flex-shrink:0!important;
  z-index:60!important;
}

#dd3-app .d3-scroll{
  padding-top:0!important;
}