/* ============================================================
   freescene.css · 简易场景（剧本流）
   ------------------------------------------------------------
   骨架：顶栏（地名 / 时间）→ 在场角色 → 剧本流 → 输入栏
   旁白 = 左侧细线 + 正文；角色 = 头像 + 名字 + 带底台词；
   我 = 右对齐 + 右侧细线 + 香槟金
   颜色全部走 token，日间单独覆盖
   ============================================================ */

.fs-page {
    position: fixed; inset: 0; z-index: 40;
    display: none; flex-direction: column;
    background: var(--bg-deep, #0A0610);
    color: var(--text);
}
.fs-page.active { display: flex; }
.fs-page button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- 背景 ---------- */
.fs-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.fs-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 5, 13, .30) 0%,
        rgba(8, 5, 13, .12) 30%,
        rgba(8, 5, 13, .58) 62%,
        rgba(8, 5, 13, .95) 100%);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}
/* 日间：底部是浅色，所以页面本身要换成暖白，否则没有背景图时上面一片黑 */
html[data-mode="day"] .fs-page {
    background: linear-gradient(180deg, var(--day-bg) 0%, var(--day-bg-2) 100%);
}
html[data-mode="day"] .fs-bg::after {
    background: linear-gradient(180deg,
        rgba(246, 241, 236, .58) 0%,
        rgba(246, 241, 236, .40) 28%,
        rgba(246, 241, 236, .70) 60%,
        rgba(246, 241, 236, .97) 100%);
}

/* 简易场景打开时，地点页真正隐藏（不是被盖住） */
body.fs-open .location-page { display: none !important; }

/* ---------- 顶栏 ----------
   z-index 必须高于 .fs-chars / .fs-list（都是 2）：更多菜单是 fs-top 里的绝对定位层，
   fs-top 若只有 2，菜单下半截会被后画的 fs-list 盖住 —— 看着弹出来了，点击全落在列表上。 */
.fs-top {
    position: relative; z-index: 20;
    display: flex; align-items: flex-start; gap: 10px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px;
}
.fs-title { flex: 1; min-width: 0; }
.fs-place {
    display: block; width: 100%; text-align: left;
    border: 0; background: none; padding: 0;
    color: var(--text);
    font-size: 19px; font-weight: 500; letter-spacing: .04em; line-height: 1.25;
    cursor: pointer;
    font-family: inherit;
}
.fs-sub {
    margin-top: 5px;
    font-size: 10px; letter-spacing: .18em;
    color: var(--text-dim); opacity: .5;
}
.fs-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.fs-icon-btn {
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    background: rgba(246, 240, 244, .05);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .07);
    cursor: pointer;
}
.fs-icon-btn .icon { width: 15px; height: 15px; }
.fs-icon-btn:active { background: rgba(246, 240, 244, .10); }
.fs-btn {
    height: 30px; padding: 0 10px;
    border: 0; border-radius: 15px;
    font-size: 11px; letter-spacing: .04em;
    color: var(--text-dim);
    background: rgba(246, 240, 244, .05);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .07);
    cursor: pointer;
    font-family: inherit;
}
html[data-mode="day"] .fs-icon-btn,
html[data-mode="day"] .fs-btn {
    background: rgba(255, 255, 255, .7);
    box-shadow: inset 0 0 0 1px rgba(36, 26, 34, .09);
    color: var(--day-dim);
}

/* 简易模式「更多」菜单：index.html 里挪到 .fs-page 外面了，用 fixed 定位，
   z-index 高于 toast（99999）—— 否则顶部通知正好盖住菜单第一行，点了变成点通知。 */
#fsMorePop {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px)); right: 12px;
    z-index: 100000;
}
#fsMorePop button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body:not(.fs-open) #fsMorePop { display: none !important; }

/* ---------- 在场角色 ---------- */
.fs-chars {
    position: relative; z-index: 2;
    display: flex; gap: 6px; padding: 0 18px 10px;
    overflow-x: auto;
}
.fs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px 0 3px;
    border-radius: 13px;
    font-size: 11px; white-space: nowrap;
    color: var(--text-dim);
    background: rgba(246, 240, 244, .05);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .07);
}
.fs-chip .av {
    width: 20px; height: 20px; flex: 0 0 20px;
    border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: rgba(246, 240, 244, .7);
    background: linear-gradient(150deg, #3B2334, #211626);
}
.fs-chip .av img { width: 100%; height: 100%; object-fit: cover; }
.fs-chip.empty {
    padding: 0 12px;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .12);
    opacity: .55;
}
html[data-mode="day"] .fs-chip,
html[data-mode="day"] .fs-chip.empty {
    background: rgba(255, 255, 255, .7);
    box-shadow: inset 0 0 0 1px rgba(36, 26, 34, .09);
    color: var(--day-dim);
}
html[data-mode="day"] .fs-chip .av {
    background: linear-gradient(150deg, #EFE3D8, #E3D3C5);
    color: rgba(36, 26, 34, .6);
}

/* ---------- 剧本流 ---------- */
.fs-list {
    position: relative; z-index: 2;
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 4px 18px 12px;
    display: flex; flex-direction: column; gap: 15px;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 92%, transparent 100%);
}
.fs-empty {
    margin-top: 28vh; text-align: center;
    font-size: 13px; color: var(--text-dim); opacity: .55;
}

/* 旁白：左侧一根细线 + 正文 */
.fs-narr {
    position: relative;
    padding: 2px 0 2px 11px;
    font-size: 12.5px; line-height: 1.78;
    color: var(--text-dim);
}
.fs-narr::before {
    content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
    width: 2px; border-radius: 1px;
    background: linear-gradient(180deg, rgba(201, 166, 107, .6), rgba(201, 166, 107, .08));
}

/* 角色：头像 + 名字 + 带底台词 */
.fs-line { display: flex; gap: 9px; align-items: flex-start; }
.fs-avatar {
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: rgba(246, 240, 244, .7);
    background: linear-gradient(150deg, #3B2334, #211626);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .08);
}
.fs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fs-col { min-width: 0; }
.fs-name {
    font-size: 10.5px; letter-spacing: .08em;
    color: var(--primary);
    margin-bottom: 3px;
}
.fs-say {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 4px 13px 13px 13px;
    font-size: 14px; line-height: 1.70;
    color: var(--text);
    background: linear-gradient(180deg, rgba(212, 106, 147, .15), rgba(212, 106, 147, .09));
    box-shadow: inset 0 0 0 1px rgba(212, 106, 147, .14);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 我：右对齐 + 右侧竖线 + 香槟金 */
.fs-me {
    align-self: flex-end;
    max-width: 80%;
    position: relative;
    padding: 2px 11px 2px 0;
    text-align: right;
    font-size: 14px; line-height: 1.72;
    color: rgba(214, 180, 120, .95);
    white-space: pre-wrap;
    word-break: break-word;
}
.fs-me::after {
    content: ""; position: absolute; right: 0; top: 3px; bottom: 3px;
    width: 2px; border-radius: 1px;
    background: linear-gradient(180deg, rgba(201, 166, 107, .85), rgba(201, 166, 107, .12));
}
html[data-mode="day"] .fs-me { color: #7E5C22; }
html[data-mode="day"] .fs-say {
    background: linear-gradient(180deg, rgba(178, 58, 102, .10), rgba(178, 58, 102, .06));
    box-shadow: inset 0 0 0 1px rgba(178, 58, 102, .14);
    color: var(--day-ink);
}
html[data-mode="day"] .fs-avatar {
    background: linear-gradient(150deg, #EFE3D8, #E3D3C5);
    color: rgba(36, 26, 34, .6);
}
html[data-mode="day"] .fs-name { color: var(--day-accent); }
html[data-mode="day"] .fs-narr { color: var(--day-dim); }

/* ---------- 场记（世界事件） ---------- */
.fs-event-bar {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 8px;
    margin: 0 18px 8px;
    font-size: 10.5px; letter-spacing: .04em;
    color: var(--text-dim); opacity: .62;
}
.fs-event-bar[hidden] { display: none; }
.fs-event-bar::before {
    content: "场记";
    color: var(--accent); opacity: .8;
    font-size: 9.5px; letter-spacing: .16em;
}
.fs-event-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-event-look, .fs-event-ignore {
    border: 0; background: none; padding: 0 2px;
    font-size: 10.5px; cursor: pointer; font-family: inherit;
}
.fs-event-look { color: var(--primary); }
.fs-event-ignore { color: var(--text-dim); opacity: .7; }
html[data-mode="day"] .fs-event-bar { color: var(--day-dim); }

/* ---------- 换地点确认 ---------- */
.fs-switch-bar {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 8px;
    margin: 0 18px 8px; padding: 9px 12px;
    border-radius: 12px;
    font-size: 11.5px;
    background: rgba(212, 106, 147, .12);
    box-shadow: inset 0 0 0 1px rgba(212, 106, 147, .28);
}
.fs-switch-bar[hidden] { display: none; }
.fs-switch-text { flex: 1; min-width: 0; color: var(--text-dim); }
.fs-switch-yes, .fs-switch-no {
    border: 0; border-radius: 12px; padding: 5px 12px;
    font-size: 11px; cursor: pointer; font-family: inherit;
}
.fs-switch-yes { background: var(--primary); color: #1B0C14; font-weight: 600; }
.fs-switch-no { background: rgba(246, 240, 244, .08); color: var(--text); }
html[data-mode="day"] .fs-switch-yes { color: #FFF7F9; }

/* ---------- 输入栏 ----------
   直接用 location.css 的 .scene-input-bar 和里面的三个控件（跟 2D / 3D 同一套），
   这里不再改按钮 / 输入框 / 发送键的任何样式，只补 iPhone 底部安全区。 */
.fs-page .scene-input-bar {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   日间补漏：顶栏文字 / 输入框占位符
   ============================================================ */
html[data-mode="day"] .fs-place { color: var(--day-ink); }
html[data-mode="day"] .fs-sub { color: var(--day-dim); opacity: .7; }
html[data-mode="day"] .fs-event-bar { color: var(--day-dim); }
html[data-mode="day"] .fs-empty { color: var(--day-dim); }
html[data-mode="day"] .fs-switch-bar {
    background: rgba(178, 58, 102, .08);
    box-shadow: inset 0 0 0 1px rgba(178, 58, 102, .22);
}
html[data-mode="day"] .fs-switch-text { color: var(--day-dim); }
html[data-mode="day"] .fs-switch-no { background: rgba(36, 26, 34, .06); color: var(--day-ink); }
/* ===== ���׳��������ࡹ��Ԥ������ ===== */
.loc-pop-info {
    padding: 8px 12px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-variant-numeric: tabular-nums;
}
html[data-mode="day"] .loc-pop-info {
    color: var(--day-dim);
    border-top-color: rgba(36, 26, 34, .1);
}