/**
 * 主题页 · 手机端强制布局
 * 使用 html.fq-mobile（App WebView 里 body 类可能未挂上；宽度探测也常不准）
 * 与桌面同一套组件：顶栏 / 侧栏抽屉 / 频道 Tab / 工具栏 / 发送区，只改排布不换功能
 */
html.fq-mobile .guild-mobile-bar,
body.fq-mobile .guild-mobile-bar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 30;
}
html.fq-mobile .guild-mobile-side-toggle,
body.fq-mobile .guild-mobile-side-toggle {
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
}
html.fq-mobile .guild-mobile-theme-name,
body.fq-mobile .guild-mobile-theme-name {
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f172a;
}

html.fq-mobile .guild-layout,
html.fq-mobile .guild-layout--chat,
body.fq-mobile .guild-layout,
body.fq-mobile .guild-layout--chat {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: calc(100vh - 48px);
    gap: 0 !important;
}

html.fq-mobile .guild-side--right,
body.fq-mobile .guild-side--right {
    display: none !important;
}

/* 左栏：抽屉，与桌面同一侧栏内容 */
html.fq-mobile .guild-layout--chat > .guild-side--left,
body.fq-mobile .guild-layout--chat > .guild-side--left {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 320px) !important;
    max-height: 100vh !important;
    z-index: 50 !important;
    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.22);
    border-right: 1px solid #e2e8f0;
    padding: 16px 14px !important;
}
html.fq-mobile .guild-layout--chat.guild-side-open > .guild-side--left,
body.fq-mobile .guild-layout--chat.guild-side-open > .guild-side--left {
    display: block !important;
}
html.fq-mobile .guild-side-backdrop,
body.fq-mobile .guild-side-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.42) !important;
    z-index: 45 !important;
}

html.fq-mobile .guild-main,
body.fq-mobile .guild-main {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 8px 10px 16px !important;
    overflow: visible !important;
    box-sizing: border-box;
}
html.fq-mobile .guild-mobile-bar,
body.fq-mobile .guild-mobile-bar { order: 1; }
html.fq-mobile .guild-layout--chat > .guild-side--left,
body.fq-mobile .guild-layout--chat > .guild-side--left { order: 3; }

/* 与桌面相同的 Tab，横向可滑 */
html.fq-mobile .guild-tabs,
html.fq-mobile .guild-channel-tabs,
body.fq-mobile .guild-tabs,
body.fq-mobile .guild-channel-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding: 0 0 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
html.fq-mobile .guild-tabs button,
html.fq-mobile .guild-channel-tabs button,
body.fq-mobile .guild-tabs button,
body.fq-mobile .guild-channel-tabs button {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    min-height: 38px !important;
}

html.fq-mobile .world-channel-legend,
body.fq-mobile .world-channel-legend {
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
}
html.fq-mobile .world-legend-note,
html.fq-mobile .chat-context-hint--extra,
html.fq-mobile .guild-hero-tagline,
body.fq-mobile .world-legend-note,
body.fq-mobile .chat-context-hint--extra,
body.fq-mobile .guild-hero-tagline {
    display: none !important;
}
html.fq-mobile .chat-context-hint,
body.fq-mobile .chat-context-hint {
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
}

html.fq-mobile .guild-chat-box,
body.fq-mobile .guild-chat-box {
    min-height: 42vh;
    display: flex;
    flex-direction: column;
}
html.fq-mobile .guild-chat-messages,
body.fq-mobile .guild-chat-messages {
    min-height: 36vh;
    max-height: none !important;
    flex: 1;
}

/* 输入区：与桌面同一工具（音频/视频/表情），手机改为上下排布，避免挤成一行 */
html.fq-mobile .guild-chat-compose,
body.fq-mobile .guild-chat-compose {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box;
}
html.fq-mobile .chat-compose-field,
body.fq-mobile .chat-compose-field {
    width: 100% !important;
    flex: none !important;
}
html.fq-mobile .chat-compose-editor,
body.fq-mobile .chat-compose-editor {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    box-sizing: border-box;
}
html.fq-mobile .chat-compose-toolbar,
body.fq-mobile .chat-compose-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
}
html.fq-mobile .chat-compose-tools,
body.fq-mobile .chat-compose-tools {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    width: 100% !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}
html.fq-mobile .chat-compose-actions,
body.fq-mobile .chat-compose-actions {
    display: flex !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 8px !important;
}
html.fq-mobile .chat-compose-actions .btn,
body.fq-mobile .chat-compose-actions .btn {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 15px !important;
}
html.fq-mobile .chat-media-btn,
html.fq-mobile .chat-emoji-btn,
body.fq-mobile .chat-media-btn,
body.fq-mobile .chat-emoji-btn {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
html.fq-mobile .chat-tool-label,
body.fq-mobile .chat-tool-label {
    display: inline !important;
    font-size: 13px !important;
}
html.fq-mobile .chat-msg-emoji,
html.fq-mobile .chat-compose-editor .chat-compose-emoji,
body.fq-mobile .chat-msg-emoji,
body.fq-mobile .chat-compose-editor .chat-compose-emoji {
    width: 18px !important;
    height: 18px !important;
}

/* 管理按钮加大，方便点按 */
html.fq-mobile .msg-mod-btn,
body.fq-mobile .msg-mod-btn {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}

html.fq-mobile .guild-layout:not(.guild-layout--chat) > .guild-side--left,
body.fq-mobile .guild-layout:not(.guild-layout--chat) > .guild-side--left {
    order: 3;
    width: 100% !important;
    max-height: none !important;
    border-right: none !important;
    border-top: 1px solid #e2e8f0;
}
html.fq-mobile .guild-layout:not(.guild-layout--chat) > .guild-main,
body.fq-mobile .guild-layout:not(.guild-layout--chat) > .guild-main {
    order: 2;
}

/* 顶栏导航在手机保持可展开，不挡主内容 */
html.fq-mobile .forum-topbar .nav-links,
body.fq-mobile .forum-topbar .nav-links {
    max-width: 100%;
}