/* 讨论区 · 前台样式（仅引用 --zai-* 设计令牌，禁止硬编码色值） */
/* 桌面布局：左视频弹性、右讨论面板固定 380px；<768px 切换为上下两段 */

.zai-wrap.is-forum {
    --forum-panel-w: 380px;
}

/* --------------------------------------------------------------- 布局骨架 */
.f-page {
    display: flex;
    gap: var(--zai-space-4);
    max-width: 1400px;
    margin: var(--zai-space-4) auto;
    padding: 0 var(--zai-space-4);
    height: calc(100vh - var(--zai-space-8));
    align-items: stretch;
}

.f-video {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.f-video-box {
    width: 100%;
    background: var(--zai-surface);
    border: 1px solid var(--zai-border);
    border-radius: var(--zai-radius-xl);
    padding: var(--zai-space-4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.f-video-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--zai-surface-sunken);
    border-radius: var(--zai-radius-lg);
    color: var(--zai-text-secondary);
    min-height: 320px;
}

.f-video-placeholder p { font-size: var(--zai-font-h2); margin: 0 0 var(--zai-space-2); }
.f-video-placeholder small { color: var(--zai-text-muted); }

.f-video-box h2 { margin: var(--zai-space-4) 0 var(--zai-space-1); font-size: var(--zai-font-h3); }
.f-video-meta { margin: 0; color: var(--zai-text-secondary); font-size: var(--zai-font-label); }
.f-topic {
    display: inline-block;
    margin-top: var(--zai-space-2);
    padding: var(--zai-space-1) var(--zai-space-2);
    border-radius: var(--zai-radius-full);
    background: var(--zai-color-primary-soft);
    color: var(--zai-color-primary);
    font-size: var(--zai-font-caption);
}

/* --------------------------------------------------------------- 讨论面板 */
.f-panel {
    width: var(--forum-panel-w);
    flex: 0 0 var(--forum-panel-w);
    background: var(--zai-surface);
    border: 1px solid var(--zai-border);
    border-radius: var(--zai-radius-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.f-panel-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--zai-space-2);
    padding: var(--zai-space-4);
    border-bottom: 1px solid var(--zai-border);
}

.f-panel-hd-t h1 { margin: 0; font-size: var(--zai-font-h3); line-height: 1.3; }
.f-online {
    display: inline-flex;
    align-items: center;
    gap: var(--zai-space-1);
    margin-top: var(--zai-space-2);
    font-size: var(--zai-font-caption);
    color: var(--zai-text-secondary);
}
.f-dot {
    width: 8px; height: 8px;
    border-radius: var(--zai-radius-full);
    background: var(--zai-color-success);
}
.f-online.is-off .f-dot { background: var(--zai-color-warning); }
.f-online.is-down .f-dot { background: var(--zai-color-danger); }

.f-back {
    font-size: var(--zai-font-caption);
    color: var(--zai-link);
    text-decoration: none;
    white-space: nowrap;
}
.f-back:hover { color: var(--zai-link-hover); }

/* 消息流 */
.f-msgs {
    flex: 1;
    overflow-y: auto;
    padding: var(--zai-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--zai-space-3);
    scroll-behavior: auto;
}

.f-msg {
    display: flex;
    gap: var(--zai-space-2);
    max-width: 100%;
}

.f-msg--me { flex-direction: row-reverse; }

.f-avatar {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    border-radius: var(--zai-radius-full);
    background: var(--zai-color-primary-soft);
    color: var(--zai-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--zai-font-caption);
    font-weight: 600;
}

.f-msg--partner .f-avatar {
    background: var(--zai-color-accent-soft);
    color: var(--zai-color-accent);
}

.f-bubble {
    max-width: calc(100% - 42px);
    padding: var(--zai-space-2) var(--zai-space-3);
    border-radius: var(--zai-radius-lg);
    background: var(--zai-surface-sunken);
    border: 1px solid var(--zai-border);
    font-size: var(--zai-font-body);
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}

.f-msg--me .f-bubble {
    background: var(--zai-color-primary);
    color: var(--zai-surface);
    border-color: var(--zai-color-primary);
}

.f-msg--partner .f-bubble {
    background: var(--zai-color-accent-soft);
    border-color: var(--zai-color-accent);
}

.f-meta {
    display: block;
    margin-bottom: var(--zai-space-1);
    font-size: var(--zai-font-caption);
    color: var(--zai-text-muted);
}

.f-msg--me .f-meta { text-align: right; }
.f-msg--partner .f-meta { color: var(--zai-color-accent); }

.f-at {
    color: var(--zai-color-primary);
    font-weight: 600;
}
.f-msg--me .f-at { color: var(--zai-color-info-soft); }

.f-anchor {
    display: inline-block;
    margin-right: var(--zai-space-1);
    padding: 0 var(--zai-space-1);
    border-radius: var(--zai-radius-xs);
    background: var(--zai-color-success-soft);
    color: var(--zai-color-success);
    font-size: var(--zai-font-caption);
    font-weight: 600;
}

.f-reply-chip {
    display: block;
    margin-bottom: var(--zai-space-1);
    padding: var(--zai-space-1) var(--zai-space-2);
    border-radius: var(--zai-radius-sm);
    background: var(--zai-surface-sunken);
    color: var(--zai-text-secondary);
    font-size: var(--zai-font-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 系统消息 */
.f-sys {
    align-self: center;
    padding: var(--zai-space-1) var(--zai-space-3);
    border-radius: var(--zai-radius-full);
    background: var(--zai-surface-sunken);
    color: var(--zai-text-muted);
    font-size: var(--zai-font-caption);
}

/* 新消息悬浮条 */
.f-newbar {
    position: relative;
    text-align: center;
    padding: var(--zai-space-1) 0 0;
}
.f-newbar button {
    padding: var(--zai-space-1) var(--zai-space-3);
    border: 1px solid var(--zai-border-strong);
    border-radius: var(--zai-radius-full);
    background: var(--zai-surface);
    color: var(--zai-color-primary);
    font-size: var(--zai-font-caption);
    cursor: pointer;
}

/* 输入栏（P7：两行布局——第一行输入框，第二行工具栏+发送） */
.f-composer {
    flex-direction: column;
    gap: var(--zai-space-2);
    padding: var(--zai-space-3) var(--zai-space-4) var(--zai-space-4);
    border-top: 1px solid var(--zai-border);
}

.f-composer-row {
    display: flex;
    align-items: center;
    gap: var(--zai-space-2);
}

.f-composer textarea {
    flex: 1;
    resize: none;
    min-height: 60px;
    max-height: 160px;
    padding: var(--zai-space-2) var(--zai-space-3);
    border: 1px solid var(--zai-border-strong);
    border-radius: var(--zai-radius-md);
    font: inherit;
    font-size: var(--zai-font-body);
    outline: none;
    background: var(--zai-surface);
    color: var(--zai-text-primary);
}
.f-composer textarea:focus { border-color: var(--zai-color-primary); box-shadow: var(--zai-shadow-focus); }

/* 第二行：工具栏（左）+ 发送按钮（右） */
.f-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zai-space-2);
}
.f-composer-bar .f-tools { margin-bottom: 0; }
/* 快捷键提示独立一行（右对齐，避免与工具栏/发送按钮挤在一起） */
.f-composer-hint-line {
    text-align: right;
    font-size: var(--zai-font-caption);
    color: var(--zai-text-muted);
    white-space: nowrap;
}

.f-send {
    flex: 0 0 auto;
    padding: var(--zai-space-2) var(--zai-space-4);
    border: none;
    border-radius: var(--zai-radius-md);
    background: var(--zai-color-primary);
    color: var(--zai-surface);
    font-size: var(--zai-font-body);
    cursor: pointer;
}
.f-send:hover { background: var(--zai-color-primary-hover); }
.f-send:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- 列表页 */
.f-list-page {
    max-width: 860px;
    margin: var(--zai-space-8) auto;
    padding: 0 var(--zai-space-4);
}

.f-list-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zai-space-4);
}
.f-list-hd h1 { margin: 0 0 var(--zai-space-1); }
.f-list-hd p { margin: 0; color: var(--zai-text-secondary); }

.f-btn {
    display: inline-block;
    padding: var(--zai-space-2) var(--zai-space-4);
    border: none;
    border-radius: var(--zai-radius-md);
    background: var(--zai-color-primary);
    color: var(--zai-surface);
    font-size: var(--zai-font-body);
    cursor: pointer;
    text-decoration: none;
}
.f-btn:hover { background: var(--zai-color-primary-hover); }
.f-btn-ghost {
    background: var(--zai-surface);
    color: var(--zai-text-secondary);
    border: 1px solid var(--zai-border-strong);
}
.f-btn-ghost:hover { background: var(--zai-surface-sunken); }

/* --------------------------------------------------------------- P2 互动 */
/* 视频播放器 */
.f-video-player {
    width: 100%;
    max-height: 46vh;
    aspect-ratio: 16 / 9;
    background: var(--zai-neutral-900);
    border-radius: var(--zai-radius-lg);
}

/* 播放锚点（可点击） */
.f-anchor {
    display: inline-block;
    margin-right: var(--zai-space-1);
    padding: 0 var(--zai-space-1);
    border-radius: var(--zai-radius-sm);
    background: var(--zai-color-info-soft);
    color: var(--zai-color-info);
    font-weight: 600;
    font-size: var(--zai-font-label);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}
.f-anchor:hover { filter: brightness(.95); }

/* 图片消息 */
.f-img {
    display: block;
    max-width: 220px;
    max-height: 220px;
    border-radius: var(--zai-radius-md);
    object-fit: cover;
    margin-top: var(--zai-space-1);
}

/* 纯表情消息大号展示 */
.f-emoji-big { font-size: 2.4rem; line-height: 1.4; }

/* 引用：气泡内 chip（可点击定位） */
.f-reply-chip {
    display: block;
    margin-bottom: var(--zai-space-1);
    padding: var(--zai-space-1) var(--zai-space-2);
    border: none;
    border-left: 3px solid var(--zai-color-primary);
    border-radius: var(--zai-radius-sm);
    background: var(--zai-surface-sunken);
    color: var(--zai-text-secondary);
    font-size: var(--zai-font-label);
    text-align: left;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-reply-chip:hover { color: var(--zai-text-primary); }

/* hover「引用」按钮 */
.f-quote-btn {
    display: none;
    margin-top: var(--zai-space-1);
    padding: 0 var(--zai-space-2);
    border: 1px solid var(--zai-border-strong);
    border-radius: var(--zai-radius-sm);
    background: var(--zai-surface);
    color: var(--zai-text-secondary);
    font-size: var(--zai-font-caption);
    cursor: pointer;
}
.f-msg:hover .f-quote-btn { display: inline-block; }
.f-quote-btn:hover { color: var(--zai-color-primary); }

/* 被引用消息定位闪烁 */
.f-flash { animation: f-flash 1.2s ease-out; }
@keyframes f-flash {
    0% { background: var(--zai-color-info-soft); }
    100% { background: transparent; }
}

/* 在线成员面板（房头下方下拉） */
.f-members {
    position: absolute;
    top: var(--zai-space-12);
    right: var(--zai-space-3);
    z-index: 30;
    width: 240px;
    max-height: 46vh;
    overflow: auto;
    padding: var(--zai-space-3);
    border-radius: var(--zai-radius-lg);
    background: var(--zai-surface);
    box-shadow: var(--zai-shadow-lg);
    border: 1px solid var(--zai-border);
}
.f-members-hd {
    font-size: var(--zai-font-label);
    color: var(--zai-text-muted);
    margin-bottom: var(--zai-space-2);
}
.f-members-empty { color: var(--zai-text-muted); font-size: var(--zai-font-label); }
.f-members-list { list-style: none; margin: 0; padding: 0; }
.f-members-list li {
    display: flex;
    align-items: center;
    gap: var(--zai-space-2);
    padding: var(--zai-space-2) 0;
    border-bottom: 1px solid var(--zai-border);
    font-size: var(--zai-font-body);
}
.f-members-list li:last-child { border-bottom: none; }
.f-member-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--zai-text-muted);
}
.f-member-dot.is-on { background: var(--zai-color-success); }
.f-members-list li.is-on .f-member-dot { background: var(--zai-color-success); }
.f-member-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-member-role {
    font-size: var(--zai-font-caption);
    color: var(--zai-text-muted);
    border: 1px solid var(--zai-border-strong);
    border-radius: var(--zai-radius-sm);
    padding: 0 var(--zai-space-1);
}

/* 输入工具条 */
.f-tools {
    display: flex;
    align-items: center;
    gap: var(--zai-space-1);
    margin-bottom: var(--zai-space-1);
}
.f-tool {
    padding: var(--zai-space-1) var(--zai-space-2);
    border: 1px solid var(--zai-border);
    border-radius: var(--zai-radius-sm);
    background: var(--zai-surface);
    color: var(--zai-text-secondary);
    font-size: var(--zai-font-label);
    cursor: pointer;
}
.f-tool:hover { color: var(--zai-color-primary); border-color: var(--zai-color-primary); }
.f-tool-sep { width: 1px; height: 16px; background: var(--zai-border-strong); margin: 0 var(--zai-space-1); }
.f-tool-ai { color: var(--zai-color-accent); }

/* P7 嵌入态：讨论面板独占 iframe，隐藏视频区/返回/手机端冗余元素 */
/* iframe 视口即为页面视口：100% 在 body 高度为 0 时算出 0px，必须用 100vh */
.f-page.is-embed {
    display: block;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.f-page.is-embed .f-video { display: none; }
/* 压过 <768px 抽屉布局的 absolute+translateY(100%)：否则面板被推出可视区，iframe 内视觉空白 */
.f-page.is-embed .f-panel {
    position: static;
    transform: none;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.f-page.is-embed .f-back,
.f-page.is-embed .f-drawer-grip,
.f-page.is-embed .f-panel-close { display: none !important; }
/* 移动端底条/悬浮按钮在 .f-page 之后，用 body 嵌入态标记隐藏 */
body.is-embed-doc .f-mobile-tabbar,
body.is-embed-doc .f-float-btn,
body.is-embed-doc .f-mobile-mask { display: none !important; }

/* 新规（PC 房间页只要讨论区）：视频列与「↓ 返回视频」隐藏，讨论区占满整行。
   视频元素仍保留在 DOM（forum.js 多处裸引用，且移动端仍在用），PC 端仅不展示。 */
.f-page:not(.is-embed) .f-video { display: none; }
.f-page:not(.is-embed) .f-panel { flex: 1 1 100%; }
.f-page:not(.is-embed) .f-panel-close { display: none !important; }

/* 工具弹层（@选单 / 表情面板） */
.f-toolbox {
    margin-bottom: var(--zai-space-2);
    padding: var(--zai-space-2);
    border: 1px solid var(--zai-border);
    border-radius: var(--zai-radius-md);
    background: var(--zai-surface-sunken);
    max-height: 32vh;
    overflow: auto;
}
.f-picker-title {
    font-size: var(--zai-font-label);
    color: var(--zai-text-muted);
    margin-bottom: var(--zai-space-1);
}
.f-picker-list { display: flex; flex-direction: column; gap: var(--zai-space-1); }
.f-picker-item {
    display: flex;
    align-items: center;
    gap: var(--zai-space-2);
    padding: var(--zai-space-1) var(--zai-space-2);
    border: none;
    border-radius: var(--zai-radius-sm);
    background: transparent;
    color: var(--zai-text-primary);
    font-size: var(--zai-font-body);
    text-align: left;
    cursor: pointer;
}
.f-picker-item:hover { background: var(--zai-surface); }
.f-picker-item em {
    font-style: normal;
    font-size: var(--zai-font-caption);
    color: var(--zai-text-muted);
    margin-left: auto;
}
.f-emoji-list { display: flex; flex-wrap: wrap; gap: var(--zai-space-1); }
.f-emoji-item {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--zai-radius-sm);
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
}
.f-emoji-item:hover { background: var(--zai-surface); }

/* 引用条（输入区上方） */
.f-quote {
    display: flex;
    align-items: center;
    gap: var(--zai-space-2);
    margin-bottom: var(--zai-space-1);
    padding: var(--zai-space-1) var(--zai-space-2);
    border-left: 3px solid var(--zai-color-primary);
    border-radius: var(--zai-radius-sm);
    background: var(--zai-surface-sunken);
    font-size: var(--zai-font-label);
    color: var(--zai-text-secondary);
}
.f-quote-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-quote-x {
    border: none;
    background: transparent;
    color: var(--zai-text-muted);
    font-size: var(--zai-font-h4);
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--zai-space-1);
}
.f-quote-x:hover { color: var(--zai-color-danger); }

/* 视频区提示 */
.f-video-hint {
    margin: var(--zai-space-3) 0 0;
    color: var(--zai-text-muted);
    font-size: var(--zai-font-label);
}
.f-video-hint b { color: var(--zai-color-info); }

.f-notice-bar {
    margin-top: var(--zai-space-4);
    padding: var(--zai-space-2) var(--zai-space-3);
    border-radius: var(--zai-radius-md);
    background: var(--zai-color-warning-soft);
    color: var(--zai-color-warning);
    font-size: var(--zai-font-label);
}

.f-create {
    display: flex;
    gap: var(--zai-space-2);
    margin-top: var(--zai-space-4);
    padding: var(--zai-space-4);
    border: 1px solid var(--zai-border);
    border-radius: var(--zai-radius-lg);
    background: var(--zai-surface);
}
.f-input {
    flex: 1;
    min-width: 0;
    padding: var(--zai-space-2) var(--zai-space-3);
    border: 1px solid var(--zai-border-strong);
    border-radius: var(--zai-radius-md);
    font: inherit;
    font-size: var(--zai-font-body);
}

.f-room-list { list-style: none; margin: var(--zai-space-6) 0 0; padding: 0; }
.f-room-list li + li { margin-top: var(--zai-space-3); }
.f-room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zai-space-4);
    padding: var(--zai-space-4);
    background: var(--zai-surface);
    border: 1px solid var(--zai-border);
    border-radius: var(--zai-radius-lg);
    text-decoration: none;
    color: var(--zai-text-primary);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.f-room-item:hover { border-color: var(--zai-color-primary); box-shadow: var(--zai-shadow-sm); }
.f-room-item h3 { margin: 0 0 var(--zai-space-1); font-size: var(--zai-font-body-lg); }
.f-room-item p { margin: 0; font-size: var(--zai-font-caption); color: var(--zai-text-secondary); }
.f-room-side { color: var(--zai-link); font-size: var(--zai-font-caption); }

.f-empty {
    margin-top: var(--zai-space-8);
    padding: var(--zai-space-8) var(--zai-space-4);
    text-align: center;
    background: var(--zai-surface-sunken);
    border-radius: var(--zai-radius-lg);
    color: var(--zai-text-muted);
}

/* --------------------------------------------------------------- 提示页 */
.f-notice-page { max-width: 560px; margin: var(--zai-space-16) auto; padding: 0 var(--zai-space-4); }
.f-notice-card {
    padding: var(--zai-space-8) var(--zai-space-6);
    text-align: center;
    background: var(--zai-surface);
    border: 1px solid var(--zai-border);
    border-radius: var(--zai-radius-xl);
    box-shadow: var(--zai-shadow-sm);
}
.f-notice-card h1 { margin: 0 0 var(--zai-space-3); }
.f-notice-card p { margin: 0 0 var(--zai-space-6); color: var(--zai-text-secondary); }

/* --------------------------------------------------------------- 响应式 */
@media (max-width: 1023px) {
    .f-page { flex-direction: column; height: auto; }
    .f-panel { width: 100%; flex: 1 1 auto; min-height: 420px; }
    .f-video-box { min-height: 240px; }
}

/* --------------------------------------------------------------- P3 @Partner（AI 助教） */
/* AI 徽标：吸附在 meta 行右侧，渐变紫底 */
.f-msg--partner .f-meta { display: inline-block; margin-right: var(--zai-space-2); }
.f-ai-badge {
    display: inline-block;
    vertical-align: middle;
    padding: 0 var(--zai-space-2);
    border-radius: var(--zai-radius-full);
    background: var(--zai-color-accent);
    color: var(--zai-surface);
    font-size: var(--zai-font-caption);
    font-weight: 600;
}

/* 引用卡：AI 应答引用的知识片段 */
.f-kbrefs {
    margin-top: var(--zai-space-2);
    border: 1px dashed var(--zai-color-accent);
    border-radius: var(--zai-radius-sm);
    padding: var(--zai-space-1) var(--zai-space-2);
    background: var(--zai-surface);
}
.f-kbrefs-title {
    font-size: var(--zai-font-caption);
    color: var(--zai-color-accent);
    font-weight: 600;
    margin-bottom: var(--zai-space-1);
}
.f-kbref {
    display: block;
    padding: var(--zai-space-1) 0;
    border-top: 1px solid var(--zai-border);
    text-decoration: none;
    color: inherit;
}
.f-kbref:hover .f-kbref-t { color: var(--zai-color-accent); }
.f-kbref-t {
    font-size: var(--zai-font-label);
    font-weight: 600;
    color: var(--zai-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.f-kbref-e {
    font-size: var(--zai-font-caption);
    color: var(--zai-text-secondary);
    line-height: 1.4;
    margin-top: var(--zai-space-1);
}

/* 思考中/失败系统消息 */
.f-sys--ai {
    background: var(--zai-color-accent-soft);
    color: var(--zai-color-accent);
}
.f-sys--ai::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: var(--zai-space-1);
    border-radius: var(--zai-radius-full);
    background: currentColor;
    animation: f-think 1s ease-in-out infinite;
}
@keyframes f-think {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
.f-sys--fail {
    background: var(--zai-color-danger-soft);
    color: var(--zai-color-danger);
}

/* --------------------------------------------------------------- P5 手机端 */
/* 桌面默认隐藏移动端元素 */
.f-drawer-grip,
.f-mobile-tabbar,
.f-float-btn,
.f-mobile-mask,
.f-panel-close {
    display: none;
}

/* 手机（<768px）：视频全屏 + 讨论区抽屉 + 底部操作条 */
@media (max-width: 767px) {
    .f-page {
        position: relative;
        display: block;
        height: 100dvh;
        max-width: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /* 视频区：默认全屏；抽屉打开时收缩为顶部 1/3 画中画式 */
    .f-video {
        position: absolute;
        inset: 0;
        height: 100%;
        transition: height .28s ease;
    }
    .f-page.is-drawer-open .f-video,
    .f-page.is-drawer-full .f-video {
        height: 33%;
        border-bottom: 1px solid var(--zai-border);
    }
    .f-video-box {
        border: none;
        border-radius: 0;
        padding: 0;
        height: 100%;
    }
    .f-video-placeholder {
        min-height: 0;
        border-radius: 0;
    }
    .f-video-player {
        max-height: none;
        border-radius: 0;
    }
    .f-video-box h2,
    .f-video-meta,
    .f-topic,
    .f-video-hint {
        padding: 0 var(--zai-space-3);
    }
    .f-video-hint { margin-bottom: var(--zai-space-3); }

    /* 讨论面板：抽屉（默认收起在底部外，上滑露出；可拉满全屏） */
    .f-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 68%;
        flex: none;
        border-radius: var(--zai-radius-xl) var(--zai-radius-xl) 0 0;
        transform: translateY(100%);
        transition: transform .28s ease;
        z-index: 20;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
    }
    .f-page.is-drawer-open .f-panel { transform: translateY(0); }
    .f-page.is-drawer-full .f-panel {
        height: 100%;
        transform: translateY(0);
        border-radius: 0;
    }

    /* 抽屉把手（房头顶部） */
    .f-drawer-grip {
        display: flex;
        justify-content: center;
        padding: var(--zai-space-2) 0 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        touch-action: none;
    }
    .f-drawer-grip i {
        width: 40px;
        height: 4px;
        border-radius: var(--zai-radius-full);
        background: var(--zai-border-strong);
    }

    .f-panel-hd {
        padding-top: calc(var(--zai-space-2) + var(--zai-space-4));
        border-top: none;
    }

    /* 横屏全屏讨论态：房头右侧「返回视频」按钮 */
    .f-panel.is-fullscreen .f-panel-close { display: inline-block; }
    .f-panel-close {
        align-self: flex-start;
        margin-left: auto;
        padding: var(--zai-space-1) var(--zai-space-3);
        border: 1px solid var(--zai-border-strong);
        border-radius: var(--zai-radius-full);
        background: var(--zai-surface);
        color: var(--zai-text-secondary);
        font-size: var(--zai-font-caption);
        cursor: pointer;
    }
    .f-panel.is-fullscreen .f-back { display: none; }
    .f-panel.is-fullscreen .f-panel-hd { justify-content: space-between; }
    .f-panel.is-fullscreen .f-panel-hd-t { flex: 1; }

    /* 底部操作条 */
    .f-mobile-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        align-items: stretch;
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--zai-surface);
        border-top: 1px solid var(--zai-border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    }
    .f-mtab {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: none;
        background: transparent;
        color: var(--zai-text-secondary);
        font-size: var(--zai-font-caption);
        cursor: pointer;
    }
    .f-mtab-ic { font-size: 1.15rem; line-height: 1; }
    .f-mtab.is-active { color: var(--zai-color-primary); font-weight: 600; }
    .f-mobile-tabbar.is-hidden { display: none; }   /* 横屏由 JS 隐藏 */

    /* 未读红点（讨论区 Tab / 横屏悬浮按钮） */
    .f-mtab-dot {
        position: absolute;
        top: 8px;
        right: calc(50% - 18px);
        min-width: 8px;
        height: 8px;
        border-radius: var(--zai-radius-full);
        background: var(--zai-color-danger);
        border: 2px solid var(--zai-surface);
    }

    /* 横屏悬浮入口：视频全屏时右侧悬浮按钮 */
    .f-float-btn {
        position: fixed;
        right: var(--zai-space-4);
        bottom: calc(72px + env(safe-area-inset-bottom));
        z-index: 45;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: var(--zai-radius-full);
        background: var(--zai-color-primary);
        color: var(--zai-surface);
        font-size: 1.2rem;
        box-shadow: var(--zai-shadow-lg);
        cursor: pointer;
    }
    .f-float-btn.is-show { display: inline-flex; align-items: center; justify-content: center; }
    .f-float-btn .f-mtab-dot { right: -2px; top: -2px; }

    /* 遮罩：抽屉打开时点击空白收起 */
    .f-mobile-mask {
        position: fixed;
        inset: 0;
        z-index: 10;
        background: rgba(0, 0, 0, .25);
    }
    .f-page.is-drawer-open .f-mobile-mask,
    .f-page.is-drawer-full .f-mobile-mask { display: block; }

    /* 消息流 / 输入栏适配 360px 宽度 */
    .f-msgs { padding: var(--zai-space-3); }
    .f-composer {
        padding: var(--zai-space-2) var(--zai-space-3) calc(var(--zai-space-3) + env(safe-area-inset-bottom));
    }
    .f-composer textarea { min-height: 48px; max-height: 120px; }
    .f-bubble { max-width: 82%; }

    /* 成员面板：抽屉内定位，抬到底部操作条上方（fixed 相对视口，避免参照不定被遮挡） */
    .f-members {
        position: fixed;
        top: auto;
        left: var(--zai-space-3);
        right: var(--zai-space-3);
        bottom: calc(var(--zai-space-4) + 56px + env(safe-area-inset-bottom));
        max-height: 60vh;
    }

    /* 独立讨论区（无视频）手机版：无视频占位时面板直接全屏 */
    .f-page.is-novideo .f-video { display: none; }
    .f-page.is-novideo .f-panel {
        height: 100%;
        transform: translateY(0);
        border-radius: 0;
    }
}

/* 横屏手机（height < width 且窄屏）：视频自动横屏全屏，讨论区入口收起为悬浮按钮 */
@media (max-width: 767px) and (orientation: landscape) {
    .f-video { height: 100% !important; }
    .f-page.is-drawer-open .f-panel,
    .f-page.is-drawer-full .f-panel {
        display: none;   /* 横屏不撑抽屉，用悬浮按钮进入全屏讨论 */
    }
    .f-page.is-drawer-full .f-float-btn { display: none; }
    .f-panel.is-fullscreen {   /* 横屏全屏讨论态（JS 切换） */
        position: fixed;
        inset: 0;
        display: flex;
        height: 100%;
        width: 100%;
        border-radius: 0;
        transform: none;
        z-index: 50;
    }
    .f-mobile-tabbar { display: none; }
}

/* ============================== P8 主从跟随 + 邀请好友 ============================== */

/* 跟随徽标：成员端 ≥2 人时显示在视频左上角 */
.f-follow-tip {
    position: absolute; top: 10px; left: 10px; z-index: 6;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(15, 18, 28, .72); color: #fff;
    font-size: 12px; line-height: 1.5; pointer-events: none;
}
.f-follow-tip::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--zai-color-success, #34c77b);
}
.f-follow-tip[hidden] { display: none; }
.f-video-box { position: relative; }

/* 邀请面板补充 */
.f-picker-empty {
    padding: 18px 12px; text-align: center;
    font-size: 12px; line-height: 1.8; color: var(--zai-text-light, #8a8f9d);
}
.f-picker-item.is-inroom { opacity: .55; cursor: default; }
.f-picker-item.is-inroom:hover { background: transparent; }
.f-picker-foot {
    padding: 8px 10px 4px; border-top: 1px solid var(--zai-border);
    margin-top: 4px; text-align: center;
}
.f-invite-copy {
    border: 0; background: transparent; color: var(--zai-color-primary);
    font-size: 12px; cursor: pointer; padding: 2px 6px;
}
.f-invite-copy:hover { text-decoration: underline; }
.f-invite-act { color: var(--zai-color-primary); font-style: normal; }

/* ============================== P1 笔记官 + P5 记忆面板 ============================== */

/* 笔记官弹窗 */
.f-note-mask {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(15, 18, 28, .5);
}
.f-note-modal {
    position: fixed; z-index: 301; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 640px; max-width: 94vw; max-height: 84vh;
    display: flex; flex-direction: column;
    background: var(--zai-surface, #fff); color: var(--zai-text-primary, #23262f);
    border-radius: 14px; box-shadow: 0 18px 60px rgba(15, 18, 28, .3);
    overflow: hidden;
}
.f-note-modal[hidden], .f-note-mask[hidden] { display: none; }
.f-note-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--zai-border, #e5e7ee);
}
.f-note-title { font-weight: 700; font-size: 14.5px; }
.f-note-stat { font-size: 11.5px; color: var(--zai-text-light, #8a8f9d); }
.f-note-x {
    margin-left: auto; border: 0; background: transparent; cursor: pointer;
    color: var(--zai-text-light, #8a8f9d); font-size: 15px; line-height: 1;
}
.f-note-x:hover { color: var(--zai-text-primary, #23262f); }
.f-note-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.f-note-empty { text-align: center; padding: 26px 10px; font-size: 13px; line-height: 2; color: var(--zai-text-secondary, #4a4f5c); }
.f-note-go {
    margin-top: 12px; border: 0; cursor: pointer;
    background: var(--zai-color-primary, #2563eb); color: #fff;
    border-radius: 9px; height: 38px; padding: 0 26px; font: inherit; font-size: 13.5px; font-weight: 600;
}
.f-note-go:disabled { opacity: .6; cursor: default; }
.f-note-md { font-size: 13px; line-height: 1.85; word-break: break-word; }
.f-note-md h4 { margin: 14px 0 6px; font-size: 14px; }
.f-note-md h4:first-child { margin-top: 0; }
.f-note-md h5 { margin: 10px 0 4px; font-size: 13px; color: var(--zai-text-secondary, #4a4f5c); }
.f-note-md ul { margin: 4px 0 10px; padding-left: 20px; }
.f-note-md li { margin: 3px 0; }
.f-note-md p { margin: 6px 0; }
.f-note-md .f-anchor {
    cursor: pointer; color: var(--zai-color-primary, #2563eb);
    background: rgba(37, 99, 235, .08); border-radius: 4px; padding: 0 3px; font-weight: 600;
}
.f-note-ft {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 12px 18px; border-top: 1px solid var(--zai-border, #e5e7ee);
}
.f-note-title-input {
    flex: 1; min-width: 160px; height: 34px; padding: 0 10px;
    border: 1px solid var(--zai-border-strong, #d3d7e0); border-radius: 8px;
    font: inherit; font-size: 12.5px; outline: none; background: var(--zai-bg, #f6f7fa);
    color: var(--zai-text-primary, #23262f);
}
.f-note-title-input:focus { border-color: var(--zai-color-primary, #2563eb); }
.f-note-save, .f-note-copy, .f-note-re {
    height: 34px; padding: 0 14px; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 12.5px; border: 1px solid var(--zai-border-strong, #d3d7e0);
    background: var(--zai-surface, #fff); color: var(--zai-text-secondary, #4a4f5c);
}
.f-note-save { background: var(--zai-color-primary, #2563eb); border-color: var(--zai-color-primary, #2563eb); color: #fff; font-weight: 600; }
.f-note-save:disabled { opacity: .6; }
.f-note-copy:hover, .f-note-re:hover { border-color: var(--zai-color-primary, #2563eb); color: var(--zai-color-primary, #2563eb); }
@media (max-width: 768px) {
    .f-note-modal { width: 96vw; max-height: 88vh; }
    .f-note-ft { padding: 10px 12px; }
}

/* 记忆面板（工具条弹层内的补充样式） */
.f-mem-add { display: flex; gap: 6px; padding: 8px 10px 4px; }
.f-mem-add input {
    flex: 1; min-width: 0; height: 32px; padding: 0 10px;
    border: 1px solid var(--zai-border-strong, #d3d7e0); border-radius: 8px;
    font: inherit; font-size: 12px; outline: none; background: var(--zai-surface, #fff);
    color: var(--zai-text-primary, #23262f);
}
.f-mem-add input:focus { border-color: var(--zai-color-primary, #2563eb); }
.f-mem-add button {
    height: 32px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--zai-color-primary, #2563eb); color: #fff; font: inherit; font-size: 12px; font-weight: 600;
}
.f-mem-list { max-height: 260px; overflow-y: auto; }
.f-mem-row {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 7px 10px; border-bottom: 1px solid var(--zai-border, #eceef4);
}
.f-mem-row:last-child { border-bottom: 0; }
.f-mem-cat {
    flex: none; font-size: 10px; font-weight: 600; line-height: 1.8;
    padding: 0 5px; border-radius: 4px;
    background: rgba(37, 99, 235, .1); color: var(--zai-color-primary, #2563eb);
}
.f-mem-txt { flex: 1; font-size: 12px; line-height: 1.6; color: var(--zai-text-primary, #23262f); word-break: break-word; }
.f-mem-del {
    border: 0; background: transparent; cursor: pointer; flex: none;
    color: var(--zai-text-light, #8a8f9d); font-size: 11px; padding: 0 2px;
}
.f-mem-del:hover { color: var(--zai-color-danger, #e5484d); }

/* 兜底：hidden 属性必须生效。作者样式若直接设 display:flex/block（如
   .f-quote 引用条）会覆盖 UA 的 [hidden]{display:none}，导致本应隐藏的
   元素常显（表现为"一条不动的空条"）。此规则放文件末尾，压住一切冲突。
   （769 补记：P1 变基时误删过这条致引用条复现，恢复并留痕。） */
[hidden] { display: none !important; }

/* 气泡内的轻量 Markdown（AI 助教回复/笔记官同源渲染器 mdRender） */
.f-md { font-size: 13px; line-height: 1.8; word-break: break-word; }
.f-md h4 { margin: 8px 0 4px; font-size: 13.5px; }
.f-md h5 { margin: 6px 0 3px; font-size: 12.5px; color: var(--zai-text-secondary); }
.f-md ul { margin: 3px 0 6px; padding-left: 18px; }
.f-md li { margin: 2px 0; }
.f-md p { margin: 4px 0; }
.f-md code {
    font-family: ui-monospace, Consolas, monospace; font-size: 12px;
    background: var(--zai-surface-sunken); border-radius: 4px; padding: 0 4px;
}
.f-md .f-anchor { cursor: pointer; }

/* AI 工具独立一行（@AI助教/笔记官/记忆/邀请）：挤在发送一行里会被压成竖排字 */
.f-ai-row {
    display: flex; align-items: center; gap: var(--zai-space-1);
    margin-top: var(--zai-space-1); flex-wrap: wrap;
}
.f-ai-row .f-tool { white-space: nowrap; }
.f-tool { white-space: nowrap; }   /* 任何工具按钮都不许把文字压成竖排 */

/* ---- 邀请确认制：待成团横幅 ---- */
.f-pending {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px; font-size: 13px;
    background: rgba(217, 139, 0, .1); color: var(--f-warn, #d98b00);
    border-bottom: 1px solid rgba(217, 139, 0, .25);
}
.f-pending-accept {
    padding: 4px 14px; border-radius: 6px;
    background: var(--f-accent, #2f6fed); color: #fff; text-decoration: none;
}
.f-pending-accept:hover { opacity: .9; }

/* ---- 建房绑定课程控件 ---- */
.f-bind { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; }
.f-bind-hint { display: block; width: 100%; font-size: 12px; color: #8a94a6; }

/* ---- 建房表单：按钮不竖排 + 提示文字独占按钮下方整行 ---- */
.f-create { flex-wrap: wrap; }
.f-create .f-btn {
    flex: none;
    white-space: nowrap;
    min-width: 4.5em;
    text-align: center;
}
.f-create > .f-bind-hint,
.f-create > small {
    flex-basis: 100%;
    margin-top: 8px;
}