/* 天空之泪 · Web Demo 样式
   主题：复古高科技（Retro-Futurism）浅色主题
   白灰渐变底 · 黑 → 钴蓝渐变选中态 · 硬阴影 + 网格底纹
   选中状态统一规范（规则 32）：黑色 → 钴蓝色渐变 */

:root {
    --bg: linear-gradient(150deg, #ffffff 0%, #eceef3 48%, #e0e3ea 100%);
    --panel: #ffffff;
    --panel-2: #eef0f5;
    --line: #c8cdd8;
    --line-strong: #99a1b1;
    --text: #14181f;
    --text-dim: #5f6878;
    --cobalt: #1e5eff;
    --cobalt-light: #1b48d8;      /* 白底强调文字（可读性） */
    --sel-glow: #5b8cff;          /* 深色渐变选中框上的亮蓝 */
    --ok-blue: #1e5eff;
    --err-red: #d92b2b;
    --amber: #b4610c;             /* 复古橙（完成/警示标记） */
    --hard-shadow: 3px 3px 0 rgba(20, 24, 31, 0.12);
    --font-mono: "Cascadia Mono", "Consolas", "Segoe UI Mono", "Courier New", monospace;
    --selected-gradient: linear-gradient(135deg, #000000 0%, #1e5eff 100%);
}

* { box-sizing: border-box; }

/* 全文禁止复制：任何地方都不可选中文字（拖拽字块用 HTML5 draggable，不受影响） */
html, body, body * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;   /* iOS 长按弹出（拷贝/查询）菜单 */
}
img { -webkit-user-drag: none; }  /* 头像等图片不可拖出保存 */

::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
html { background: var(--bg); }
body {
    background: var(--bg);
    color: var(--text);
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 15px;
}

/* 复古蓝图网格底纹（不可交互） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(30, 94, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 94, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
}

.hidden { display: none !important; }

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===================== 顶栏 ===================== */
#topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(180deg, #ffffff, #f2f4f8);
    border-bottom: 1px solid var(--text);
    flex: 0 0 auto;
}

.brand { font-size: 20px; font-weight: 700; letter-spacing: 4px; }
.brand-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: 10px;
    letter-spacing: 2px;
    font-family: var(--font-mono);
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

.day-badge {
    padding: 4px 12px;
    border: 1px solid var(--text);
    border-radius: 4px;
    background: var(--text);
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: var(--font-mono);
}

.platform-tag {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

/* 顶栏：关键词收集计数（观察报告按钮旁） */
.keyword-badge {
    padding: 5px 10px;
    border: 1px solid var(--cobalt);
    border-radius: 6px;
    background: #ffffff;
    color: var(--cobalt-light);
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
    font-family: var(--font-mono);
    box-shadow: var(--hard-shadow);
}

/* ===================== 按钮 ===================== */
.btn {
    padding: 7px 16px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: #ffffff;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    box-shadow: 2px 2px 0 rgba(20, 24, 31, 0.10);
    transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.12s ease;
}
.btn:hover {
    border-color: var(--cobalt);
    color: var(--cobalt-light);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 rgba(30, 94, 255, 0.18);
}
.btn-primary {
    background: var(--selected-gradient);
    border-color: #000000;
    color: #fff;
    box-shadow: 2px 2px 0 rgba(20, 24, 31, 0.28);
}
.btn-primary:hover {
    color: #fff;
    border-color: #000000;
    filter: brightness(1.12);
    box-shadow: 3px 3px 0 rgba(20, 24, 31, 0.32);
}
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgba(30, 94, 255, 0.06); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================== 主布局 ===================== */
#main-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    padding: 10px;
}

#investigation {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow-y: auto;
}

.panel {
    background: linear-gradient(180deg, #ffffff 0%, #f5f6fa 100%);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: var(--hard-shadow);
}

.panel-title {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-family: var(--font-mono);
    border-left: 3px solid var(--cobalt);
    padding-left: 8px;
}

.panel-hint { margin-left: 10px; color: var(--cobalt-light); text-transform: none; letter-spacing: 0; }

/* 关键词栏：限制高度，收集增多时内部滚动，不挤占剧情可视区 */
#keyword-panel { padding: 6px 10px; }
#keyword-panel .panel-title { margin-bottom: 5px; }
#keyword-list { max-height: 84px; overflow-y: auto; scrollbar-width: thin; }

/* 地点栏：压缩高度 */
#location-panel { padding: 6px 10px; }
#location-panel .panel-title { margin-bottom: 5px; }

/* 地点空位（纯进度显示；点击正文地点词块 → 自动点亮，无需手动填入） */
.loc-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-slot-empty {
    min-width: 72px;
    padding: 4px 10px;
    border: 1px dashed var(--line-strong);
    border-radius: 4px;
    background: #ffffff;
    color: var(--text-dim);
    font-size: 11.5px;
    text-align: center;
    cursor: default;
    font-family: var(--font-mono);
}
.story-node-tag .tag-loc { color: var(--cobalt-light); }

/* ===================== 剧情（扩大可视区域：其余面板压缩后让位给剧情） ===================== */
#story-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 380px; }

.story-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff, #fafbfd);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 16px 18px;
    line-height: 1.9;
    font-size: 15.5px;
    min-height: 280px;
    max-height: 76vh;
    /* 逐行排版：[头像列][文本列]，所有文本左缘对齐 */
    display: flex;
    flex-direction: column;
}
.story-line { display: flex; align-items: center; /* 冒号与正文垂直居中于头像（头像缩放不敏感） */ }
.story-line-gutter {
    flex: 0 0 66px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.story-line-content { flex: 1 1 auto; min-width: 0; }
/* 对白行两列 grid（参考排版）：列1 = 姓名+冒号，列2 = 正文块——
   长对白换行后的续行与正文列（冒号之后）对齐，而非回到名字列 */
.story-line-content.speaker-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
}
.speaker-head { white-space: nowrap; }
.speaker-body { min-width: 0; }
.story-line.blank { flex: none; height: 14px; }

/* 说话人姓名：钴蓝色、加粗、比正文大一号（正文 15.5 → 17.5） */
.speaker-name {
    color: var(--cobalt-light);
    font-weight: 700;
    font-size: 17.5px;
    white-space: nowrap;
}

/* 间距层级：对话↔对话 18px ＜ 旁白↔对话 28px；旁白段间 38px（空行高 14 + 两侧边距） */
.story-line.speaker + .story-line.blank,
.story-line.blank + .story-line.speaker { margin-top: 2px; }
.story-line.narrative + .story-line.blank,
.story-line.blank + .story-line.narrative { margin-top: 12px; }
.story-line.speaker + .story-line.speaker { margin-top: 10px; } /* 无空行分隔的对话兜底 */

.story-node-tag {
    display: inline-block;
    font-size: 11px;
    color: var(--cobalt-light);
    background: rgba(30, 94, 255, 0.06);
    border: 1px solid var(--cobalt);
    border-radius: 3px;
    padding: 1px 6px;
    margin-bottom: 0;
    flex: 0 0 auto;        /* 单行布局：标签固定在右侧，不被挤压换行 */
    white-space: nowrap;
    letter-spacing: 1px;
    font-family: var(--font-mono);
}

/* 吸顶容器：小时间线 + 正文标签行常驻滚动区最上部（用户规则）。
   负 margin 抵消 .story-scroll 的 padding（16px/18px）→ 自然位置与原布局一致；
   top:-16px 抵消负 margin 对 sticky 约束线的影响 → 钉住时顶缘贴齐滚动口内沿（无缝隙），
   正文从其下方滚过；不透明底色遮住滚过的文字。 */
.story-sticky {
    position: sticky;
    top: -16px;
    z-index: 5;
    margin: -16px -18px 0;
    padding: 6px 18px;                    /* 顶距 16 → 6：压缩吸顶高度，正文展示面积更大 */
    display: flex;                        /* 单行布局：时间线与标签同行（用户规则：再更矮） */
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #fafbfd 100%);
    box-shadow: 0 3px 5px -3px rgba(20, 24, 31, 0.16);
    border-bottom: 1px dashed var(--line); /* 分隔线随整行下移 */
}

/* 剧情时间线：本日已读节点，可横向拖动 / 点击回看（点漏的关键词可回头补收） */
.story-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1 1 auto;        /* 单行布局：占满左侧余宽，过长时自身横向滚动 */
    min-width: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scrollbar-width: thin;
}
.story-track.dragging { cursor: grabbing; }
.story-stop {
    flex: 0 0 auto;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-dim);
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: var(--font-mono);
}
.story-stop:hover { border-color: var(--cobalt); color: var(--cobalt-light); }
.story-stop.latest { border-color: var(--cobalt); color: var(--cobalt-light); background: rgba(30, 94, 255, 0.06); }
.story-stop.selected {
    /* 选中态：黑 → 钴蓝渐变（规则 32） */
    background: var(--selected-gradient);
    border-color: var(--sel-glow);
    color: #fff;
    box-shadow: 0 0 8px rgba(30, 94, 255, 0.45), 2px 2px 0 rgba(20, 24, 31, 0.20);
}

/* 剧情关键词：点击收集（收入左栏「关键词 / 字块」） */
.kw-link {
    color: var(--cobalt-light);
    background: rgba(30, 94, 255, 0.05);
    border-bottom: 1px dashed var(--cobalt);
    cursor: pointer;
    padding: 0 2px;
    border-radius: 2px;
    transition: background 0.12s ease, color 0.12s ease;
}
.kw-link:hover {
    background: var(--selected-gradient);
    color: #fff;
    border-bottom-color: transparent;
    box-shadow: 0 0 6px rgba(30, 94, 255, 0.5);
}

/* ===================== 人物头像（姓名首字 + 固定配色；正文人名前小头像） ===================== */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(20, 24, 31, 0.8);
    box-shadow: 2px 2px 0 rgba(20, 24, 31, 0.16);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    flex: none;
    user-select: none;
    object-fit: cover;
    background: #8892a3;
    cursor: zoom-in; /* 所有头像可点击 → 放大图 */
}
.avatar.placeholder {
    background: linear-gradient(135deg, #a7b0bf 0%, #7b8494 100%);
}
/* 人物卡头像：配合面板压缩（正文小头像仍为 40px） */
/* 人物卡头像：放大一倍（68px） */
.avatar-md { width: 68px; height: 68px; font-size: 32px; }
/* 正文内联头像（头像列）：80px 的 2/3 ≈ 53px；由行 flex 垂直居中，无额外位移 */
.avatar-sm {
    width: 53px;
    height: 53px;
    font-size: 27px;
    border-width: 2px;
    box-shadow: 2px 2px 0 rgba(20, 24, 31, 0.14);
    margin: 0 3px;
}
.story-text .char-name-inline { white-space: nowrap; }

/* ===================== 组合调查（压缩面积，把空间让给剧情） ===================== */
#combo-panel { padding: 7px 10px; }
#combo-panel .panel-title { margin-bottom: 6px; }
.combo-slots { display: flex; gap: 6px; flex-wrap: wrap; }

.combo-slot {
    flex: 1 1 110px;
    background: #ffffff;
    border: 1px dashed var(--line-strong);
    border-radius: 4px;
    padding: 6px 8px;
    text-align: center;
    min-height: 44px;
}
.combo-slot-label { font-size: 10px; color: var(--text-dim); letter-spacing: 2px; font-family: var(--font-mono); }
.combo-slot-value { margin-top: 4px; font-size: 14px; font-weight: 700; }
/* 人物多选：多人名换行显示 */
.combo-slot-value:not(.empty) {
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
    font-size: 13px;
}
.combo-slot-value.empty { color: var(--text-dim); font-weight: 400; }

.combo-actions { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.combo-feedback { font-size: 13.5px; }
.combo-feedback.ok { color: var(--cobalt-light); font-weight: 700; }
.combo-feedback.err { color: var(--err-red); }

/* ===================== 通用条目（人物/地点/关键词/字块）—— 压缩高度让位剧情 ===================== */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    font-size: 12.5px;
    transition: transform 0.06s ease;
    user-select: none;
}
.chip:hover { border-color: var(--cobalt); transform: translateY(-1px); }

/* 全局统一选中状态：黑色 → 钴蓝色渐变（规则 32） */
.chip.selected,
.timeline-node.selected,
.case-cell.selected,
.block.selected,
.combo-slot.selected,
.char-card.selected {
    background: var(--selected-gradient);
    border-color: var(--sel-glow);
    color: #fff;
    box-shadow: 0 0 8px rgba(30, 94, 255, 0.45), 2px 2px 0 rgba(20, 24, 31, 0.20);
}

/* 组合槽位选中时标签仍需可读 */
.combo-slot.selected .combo-slot-label { color: #cfe0ff; }
/* 人物卡片选中时保留锁定行可读 */
.char-card.selected .char-lock { color: #c9d6f2; }
.char-card.selected .char-name.unknown { color: #c9d6f2; }

.chip-empty { color: var(--text-dim); font-size: 13px; }

/* 人物卡片（压缩面积，把空间让给剧情） */
#character-panel { padding: 7px 10px; }
#character-panel .panel-title { margin-bottom: 6px; }
/* 人物卡：纵向紧凑（头像 → 姓名/空白槽），10 卡单行排布，把高度让给剧情 */
.char-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    min-width: 116px;
    max-width: 138px;
    text-align: center;
}
.char-card .char-identity { justify-content: center; }
.char-card:hover { border-color: var(--cobalt); }
.char-card .char-name { font-weight: 700; font-size: 13px; white-space: nowrap; }
.char-card .char-lock { font-size: 10px; color: var(--cobalt-light); letter-spacing: 1px; }

/* 身份确认（姓 + 名 输入） */
.char-identity { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.char-identity input {
    width: 46px;
    padding: 3px 5px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    color: var(--text);
    text-align: center;
    font-size: 14px;
}
.char-identity input:focus {
    outline: none;
    border-color: var(--cobalt);
    box-shadow: 0 0 0 2px rgba(30, 94, 255, 0.2);
}
.char-identity .btn { padding: 3px 9px; font-size: 12px; }

.identity-msg { font-size: 12px; }
.identity-msg.err { color: var(--err-red); }
.identity-msg.ok { color: var(--cobalt-light); font-weight: 700; }

/* ===================== 点选式身份确认（姓/名空白槽 + 已获得姓名选项，无输入框） ===================== */
.pick-area { display: flex; flex-direction: column; gap: 5px; align-items: center; width: 100%; }

.pick-blanks { display: flex; gap: 5px; justify-content: center; }
.pick-blank {
    min-width: 48px;
    padding: 3px 8px;
    border: 1px dashed var(--line-strong);
    border-radius: 3px;
    background: #ffffff;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.1s ease;
}
.pick-blank:hover { border-color: var(--cobalt); color: var(--cobalt-light); }
.pick-blank.filled {
    border-style: solid;
    border-color: var(--cobalt);
    color: var(--text);
    font-weight: 700;
}

.pick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    width: 100%;
}
.pick-label {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    min-width: 14px;
    font-family: var(--font-mono);
}
.pick-empty { font-size: 10px; color: var(--text-dim); }
.pick-chip {
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #ffffff;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.06s ease;
    user-select: none;
}
.pick-chip:hover { border-color: var(--cobalt); color: var(--cobalt-light); transform: translateY(-1px); }
.pick-chip.selected {
    /* 选中态：黑 → 钴蓝渐变（规则 32） */
    background: var(--selected-gradient);
    border-color: var(--sel-glow);
    color: #fff;
    box-shadow: 0 0 8px rgba(30, 94, 255, 0.45), 1px 1px 0 rgba(20, 24, 31, 0.20);
}
.pick-confirm { font-size: 11px; padding: 2px 10px; }

/* ===================== 底部当前日时间线（压缩高度，把空间让给剧情） ===================== */
#day-timeline { flex: 0 0 auto; margin: 0 10px 8px; padding: 6px 10px; }
#day-timeline .panel-title { margin-bottom: 5px; }

.timeline-nodes { display: flex; gap: 6px; flex-wrap: wrap; }

.timeline-node {
    min-width: 62px;
    text-align: center;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: var(--font-mono);
}
.timeline-node .node-sub { display: block; font-size: 9.5px; font-weight: 400; color: var(--text-dim); margin-top: 2px; font-family: "Microsoft YaHei", sans-serif; }
.timeline-node.selected .node-sub { color: #cfe0ff; }
.timeline-node.locked { opacity: 0.4; cursor: not-allowed; }

/* ===================== 右侧：案件时间线 + 右下角地图 ===================== */
#right-column {
    flex: 0 0 430px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}
#case-timeline {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0;
}

/* 地图面板（素材制作中：预留位置 + 三楼层页签） */
#map-panel { flex: 0 0 auto; padding: 7px 10px; }
#map-panel .panel-title { margin-bottom: 6px; }
.map-floors { display: flex; gap: 6px; margin-bottom: 6px; }
.map-floor {
    padding: 3px 12px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-mono);
    transition: transform 0.06s ease;
}
.map-floor:hover { border-color: var(--cobalt); color: var(--cobalt-light); transform: translateY(-1px); }
.map-floor.selected {
    background: var(--selected-gradient);
    border-color: var(--sel-glow);
    color: #fff;
    box-shadow: 0 0 8px rgba(30, 94, 255, 0.45);
}
.map-canvas {
    height: 340px;
    border: 1px dashed var(--line-strong);
    border-radius: 4px;
    background: repeating-linear-gradient(45deg, #f6f7fb 0 12px, #eef0f6 12px 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}
.map-placeholder { font-size: 12px; color: var(--text-dim); letter-spacing: 3px; }
.map-placeholder.large { font-size: 20px; letter-spacing: 8px; padding: 40px; text-align: center; }

/* ===================== 放大查看层（头像放大图 / 地图高清图） ===================== */
.zoom-overlay { cursor: zoom-out; background: rgba(18, 22, 30, 0.78); }
.zoom-avatar-img {
    width: min(58vh, 520px);
    height: min(58vh, 520px);
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 10px 10px 0 rgba(20, 24, 31, 0.35);
    object-fit: cover;
    background: #ffffff;
}
.zoom-avatar-letter {
    width: min(50vh, 420px);
    height: min(50vh, 420px);
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 10px 10px 0 rgba(20, 24, 31, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: min(24vh, 200px);
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.map-zoom {
    width: 88vw;
    height: 82vh;
    background: repeating-linear-gradient(45deg, #f6f7fb 0 14px, #eef0f6 14px 28px);
    border: 2px solid #ffffff;
    border-radius: 6px;
    box-shadow: 10px 10px 0 rgba(20, 24, 31, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.map-zoom-title {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--text);
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 4px 14px;
}
.map-zoom-img {
    max-width: calc(88vw - 24px);
    max-height: calc(82vh - 60px);
    object-fit: contain;
    border-radius: 4px;
    background: #ffffff;
}

.case-matrix { overflow: auto; }

.case-table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-family: var(--font-mono); }
.case-table th, .case-table td {
    border: 1px solid var(--line);
    padding: 5px 4px;
    text-align: center;
    white-space: nowrap;
}
.case-table th { background: linear-gradient(180deg, #eef0f5, #e8eaf0); color: var(--text-dim); font-weight: 600; letter-spacing: 1px; }
.case-table th.row-head { text-align: left; padding-left: 8px; min-width: 64px; font-family: "Microsoft YaHei", sans-serif; }

.case-cell { cursor: default; min-width: 52px; height: 40px; background: #ffffff; }
.case-cell.has-event { cursor: pointer; }
.case-cell.has-event:hover { border-color: var(--cobalt); }
.case-cell .cell-locked { color: var(--text-dim); letter-spacing: 3px; }
.case-cell .cell-partial { color: var(--cobalt-light); letter-spacing: 2px; }
.case-cell .cell-people { font-size: 11.5px; line-height: 1.35; display: block; white-space: normal; font-family: "Microsoft YaHei", sans-serif; }
.case-cell .cell-empty { color: #8a93a3; }

.event-detail {
    margin-top: 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.7;
    min-height: 74px;
    color: var(--text-dim);
    /* 文字不越出格式：不被父级挤压、超长人物列表内部滚动、长行自动换行 */
    flex: 0 0 auto;
    max-height: 42vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    scrollbar-width: thin;
}
.event-detail.active { border-color: var(--cobalt); color: var(--text); }
.event-detail .ed-title { color: var(--cobalt-light); letter-spacing: 2px; font-size: 11px; font-family: var(--font-mono); }

/* ===================== 观察报告遮罩层 ===================== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 22, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.report-window {
    width: min(1560px, 96vw);
    height: min(980px, 96vh);
    background: linear-gradient(180deg, #ffffff, #f4f6f9);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 10px 10px 0 rgba(20, 24, 31, 0.22);
}

.report-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, #eef0f5, #e6e9f0);
}

.report-tabs { display: flex; gap: 8px; }
.report-tab {
    padding: 5px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    font-family: var(--font-mono);
}
.report-tab.active {
    background: var(--selected-gradient);
    color: #fff;
    border-color: var(--sel-glow);
    box-shadow: 0 0 8px rgba(30, 94, 255, 0.45);
}

/* 可滚动题目区域（规则 13） */
.report-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px 20px;
    min-height: 0;
}

.report-section {
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
    background: #ffffff;
}
.report-section-title {
    background: linear-gradient(90deg, rgba(30, 94, 255, 0.10), rgba(30, 94, 255, 0.03));
    padding: 8px 12px;
    font-size: 12.5px;
    letter-spacing: 2px;
    color: var(--cobalt-light);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
}
/* 已完成的 Section：复古「盖章」感 */
.report-section.completed .report-section-title {
    color: var(--amber);
    background: rgba(180, 97, 12, 0.08);
}
.report-question {
    padding: 11px 14px;
    border-bottom: 1px dashed var(--line);
    line-height: 2.1;
    white-space: pre-wrap; /* 题干支持多行（逐级解锁分组题干含换行） */
}
.report-question:last-child { border-bottom: none; }

.answer-slot {
    display: inline-block;
    min-width: 96px;
    padding: 3px 12px;
    margin: 0 4px;
    border: 1px solid var(--cobalt);
    border-radius: 4px;
    background: #ffffff;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    font-size: 14.5px;
}
.answer-slot.filled {
    background: linear-gradient(180deg, #eef2ff, #e3e9ff);
    color: var(--text);
    font-weight: 700;
}
.answer-slot:hover { box-shadow: 0 0 0 2px rgba(30, 94, 255, 0.25); }
/* 拖拽字块到栏位（高亮提示可放入） */
.answer-slot.drag-over {
    border-color: var(--cobalt);
    box-shadow: 0 0 0 2px rgba(30, 94, 255, 0.35);
}
.block[draggable="true"] { cursor: grab; }
.block[draggable="true"]:active { cursor: grabbing; }
.answer-slot.slot-character { border-color: #6b46e0; }
.answer-slot.slot-location { border-color: #14975c; }
.answer-slot.slot-time { border-color: #b8860b; }
.answer-slot.slot-keyword { border-color: #9c3ec4; }

/* 固定底部字块区域（规则 13/14：不随题目滚动） */
.report-tray {
    flex: 0 0 auto;
    border-top: 2px solid var(--line-strong);
    background: linear-gradient(180deg, #eef0f5, #e9ecf2);
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease;
}
/* 验证状态外边框（规则 18/19/20） */
.report-tray.status-ok { border-top-color: var(--ok-blue); box-shadow: inset 0 3px 0 -1px var(--ok-blue); }
.report-tray.status-err { border-top-color: var(--err-red); box-shadow: inset 0 3px 0 -1px var(--err-red); }

.tray-status { font-size: 14px; min-height: 20px; letter-spacing: 1px; }
.tray-status.ok { color: var(--cobalt-light); font-weight: 700; }
.tray-status.err { color: var(--err-red); font-weight: 700; }

/* 字块栏分行：每组（人物 / 地点 / 关键词）独占一行，行内自动换行 */
.tray-blocks { display: flex; flex-direction: column; gap: 7px; max-height: 34vh; overflow-y: auto; }
.tray-group-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* 报告字块区顶部：关键词收集计数（本日 / 全部） */
.tray-kw-count {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 1px;
    padding-bottom: 2px;
    font-family: var(--font-mono);
}
.tray-kw-count b { color: var(--cobalt-light); font-weight: 700; }

.block {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    font-size: 13.5px;
    user-select: none;
}
.block:hover { border-color: var(--cobalt); }
.block.block-type { color: var(--text-dim); font-size: 11px; cursor: default; border-style: dashed; }
.block.block-type:hover { border-color: var(--line); }

/* ===================== 结局层 ===================== */
.ending-card {
    background: linear-gradient(180deg, #ffffff, #f2f4f8);
    border: 1px solid var(--cobalt);
    border-radius: 8px;
    padding: 44px 56px;
    text-align: center;
    box-shadow: 10px 10px 0 rgba(20, 24, 31, 0.22);
}
.ending-title {
    font-size: 34px;
    letter-spacing: 12px;
    color: #14181f; /* 不支持 background-clip 时的回退 */
    background: var(--selected-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 18px;
    font-family: var(--font-mono);
}
.ending-text { font-size: 15.5px; line-height: 2; color: var(--text); margin-bottom: 26px; white-space: pre-wrap; }

/* ===================== 滚动条 ===================== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #b7bdca; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #98a0b0; }
::-webkit-scrollbar-track { background: rgba(20, 24, 31, 0.04); }