/* ============================================================
   chat.css — 连信App：仿微信PC三栏布局
   侧边栏 + 会话列表 + 聊天主区；双轨时序打字动画
   ============================================================ */

.chat-app {
    display: flex;
    width: 100%;
    height: 100%;
    background: #ededed;
    color: #1f1f1f;
    font-size: 14px;
}

/* ==================== 最左侧边栏 ==================== */
.chat-sidebar {
    width: 58px;
    flex-shrink: 0;
    background: #2e2e2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 22px;
    gap: 22px;
}
.sidebar-avatar {
    width: 38px; height: 38px;
    border-radius: 6px;
    background: linear-gradient(135deg, #4da6ff, #2a4a7f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 500;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sidebar-nav-item {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #7a7a7a;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.sidebar-nav-item:hover { color: #bcbcbc; }
.sidebar-nav-item.active { color: #07c160; }

/* ==================== 会话列表栏 ==================== */
.chat-list-panel {
    width: 250px;
    flex-shrink: 0;
    background: #e7e7e7;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #d6d6d6;
}
.chat-search-bar {
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
.chat-search-input {
    width: 100%;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: #dcdcdc;
    padding: 0 12px;
    font-size: 13px;
    color: #333;
    outline: none;
    cursor: default;
}
.chat-search-input::placeholder { color: #999; }

.chat-session-list {
    flex: 1;
    overflow-y: auto;
}
.chat-session-list::-webkit-scrollbar { width: 6px; }
.chat-session-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

.chat-session-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.12s;
}
.chat-session-item:hover { background: #dedede; }
.chat-session-item.active { background: #c9c9c9; }

.session-avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #b0b0b0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
}
/* 联系人头像色块 */
.avatar-shen    { background: linear-gradient(135deg, #ff8ab4, #d94f8a); }
.avatar-zhao    { background: linear-gradient(135deg, #5fa8f5, #2c6fc4); }
.avatar-mom     { background: linear-gradient(135deg, #f0a860, #d9822b); }
.avatar-zhoudao { background: linear-gradient(135deg, #555, #222); }
.avatar-chen    { background: linear-gradient(135deg, #6dc99a, #2e8b57); }

.session-info {
    flex: 1;
    min-width: 0;
}
.session-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.session-name {
    font-size: 14px;
    color: #1f1f1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.session-time {
    font-size: 11px;
    color: #b0b0b0;
    flex-shrink: 0;
}
.session-preview {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}
.session-badge {
    position: absolute;
    top: 12px; left: 44px;
    width: 9px; height: 9px;
    /* v56: 未读红点呼吸脉冲——一圈柔和扩散的波，提示"有东西在等你"，不喂眼 */
    animation: unreadPulse 2s ease-out infinite;
    border-radius: 50%;
    background: #ff3b30;
    border: 1px solid #e7e7e7;
}
@keyframes unreadPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* v56 动效降级：双闸门（游戏内设置仅主页生效，系统偏好全页生效） */
html.reduce-motion .msg-appear,
html.reduce-motion .session-badge {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .msg-appear, .session-badge { animation: none; }
}

/* ==================== 聊天主区 ==================== */
.chat-main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    min-width: 0;
}
.chat-main-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 14px;
}
.chat-conversation {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-conv-header {
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #e2e2e2;
    background: #f5f5f5;
}
.conv-title {
    font-size: 16px;
    font-weight: 500;
    color: #1f1f1f;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f5f5f5;
}
.chat-messages::-webkit-scrollbar { width: 7px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* ==================== 消息气泡 ==================== */
.msg-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
}
.msg-other { flex-direction: row; }
.msg-self { flex-direction: row-reverse; }

.msg-avatar {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #b0b0b0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
}
.self-avatar {
    background: linear-gradient(135deg, #4da6ff, #2a4a7f);
}

.msg-bubble {
    position: relative;
    max-width: 62%;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.msg-other .msg-bubble {
    background: #fff;
    color: #1f1f1f;
    border-top-left-radius: 2px;
}
.msg-self .msg-bubble {
    background: #95ec69;
    color: #1a1a1a;
    border-top-right-radius: 2px;
}
/* 气泡小三角 */
.msg-other .msg-bubble::before,
.msg-self .msg-bubble::before {
    content: '';
    position: absolute;
    top: 12px;
    border: 6px solid transparent;
}
.msg-other .msg-bubble::before {
    left: -11px;
    border-right-color: #fff;
}
.msg-self .msg-bubble::before {
    right: -11px;
    border-left-color: #95ec69;
}

/* 乱码/幽灵消息效果（干净字形 + CSS 数据侵蚀，避免豆腐块） */
.msg-glitch-text {
    font-family: var(--font-mono), monospace;
    letter-spacing: 2px;
    color: #ff4d4d !important;
    background: #1c0d0d !important;
    text-shadow:
        -1px 0 rgba(0, 255, 231, 0.55),
        1px 0 rgba(255, 0, 80, 0.55),
        0 0 8px rgba(255, 60, 60, 0.45);
    animation: msgGlitch 1.6s steps(6) infinite;
}
.msg-other .msg-glitch-text::before { border-right-color: #1c0d0d !important; }
.msg-self .msg-glitch-text::before { border-left-color: #1c0d0d !important; }
@keyframes msgGlitch {
    0%, 100% { transform: none; }
    20% { transform: translateX(-1px) skewX(-1deg); }
    40% { transform: translateX(1px); }
    60% { transform: translateX(-1px);
        text-shadow: 1px 0 rgba(0, 255, 231, 0.7), -1px 0 rgba(255, 0, 80, 0.7), 0 0 8px rgba(255, 60, 60, 0.5); }
    80% { transform: translateX(1px) skewX(1deg); }
}
/* 重度崩坏乱码（惊悚·渐进侵蚀）：色散强度由 --ca 变量随 corrupt 等级递增，平滑呼吸（无 transform 抖动、无跳帧） */
.msg-corrupt-text {
    font-family: var(--font-mono), monospace;
    letter-spacing: 2px;
    color: #ff3b3b !important;
    background: #1a0808 !important;
    text-shadow:
        calc(var(--ca, 2px) * -1) 0 rgba(0, 255, 231, 0.9),
        var(--ca, 2px) 0 rgba(255, 0, 80, 0.9),
        0 0 calc(var(--ca, 2px) * 3) rgba(255, 40, 40, 0.7);
    animation: corruptBreath 3s ease-in-out infinite, corruptTremble 0.14s linear infinite;
}
.msg-other .msg-corrupt-text::before { border-right-color: #1a0808 !important; }
.msg-self .msg-corrupt-text::before { border-left-color: #1a0808 !important; }
@keyframes corruptBreath {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.86; }
}
/* 高频微颤（非摆动）：幅度由 --tr 随 corrupt 等级递增，细微高频颤抖像信号不稳 */
@keyframes corruptTremble {
    0% { transform: translate(0, 0); }
    25% { transform: translate(var(--tr, 0.5px), calc(var(--tr, 0.5px) * -0.7)); }
    50% { transform: translate(calc(var(--tr, 0.5px) * -0.9), calc(var(--tr, 0.5px) * 0.6)); }
    75% { transform: translate(calc(var(--tr, 0.5px) * 0.7), var(--tr, 0.5px)); }
    100% { transform: translate(0, 0); }
}
/* 字体缺字降级：强制安全 CJK 字体栈，杜绝豆腐块 */
.glyph-fallback .msg-glitch-text, .glyph-fallback .msg-corrupt-text {
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
    letter-spacing: 1px;
}

/* 消息入场动画（v56 升级：下滑+轻弹过冲，微信感但更有生命感；
   弹性曲线收尾，气泡像"落"进对话里） */
.msg-appear {
    animation: msgAppear 0.34s cubic-bezier(0.3, 1.35, 0.5, 1);
}
@keyframes msgAppear {
    0% { opacity: 0; transform: translateY(12px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== 顶栏「正在输入」指示 ==================== */
.conv-typing {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 15px;
    color: #07c160;
}
.conv-typing-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
}
.conv-typing-dots i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #07c160;
    display: inline-block;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.conv-typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.conv-typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ==================== 时间分隔小框（微信式） ==================== */
/* 实时对话的时间戳兼作对话分隔（替代原透明分割 msg-session-gap）：
   上下留足间距，承担两次对话之间的分隔感 */
.msg-time-divider {
    align-self: center;
    margin: 12px 0;
}
.msg-time-divider span {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    color: #fff;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* ==================== 输入区 ==================== */
.chat-input-area {
    flex-shrink: 0;
    border-top: 1px solid #e2e2e2;
    background: #f5f5f5;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 16px 16px;
}

/* 玩家固定发送提示 */
.input-box-send {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* 草稿提示：深色正文字（非气泡样式，避免与已发气泡视觉重复） */
.input-draft-hint {
    flex: 1;
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
    padding: 12px 4px;
    user-select: none;
    animation: previewFade 0.3s ease;
}
@keyframes previewFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.send-btn {
    flex-shrink: 0;
    padding: 10px 26px;
    border: none;
    border-radius: 6px;
    background: #07c160;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;           /* 不可选中复制，与剧情文本区分 */
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* iOS 长按不弹复制气泡 */
    transition: background 0.15s, transform 0.1s;
}
.send-btn:hover { background: #06ad56; }
.send-btn:active { transform: scale(0.96); }

/* 选择分支 */
.input-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.choice-btn {
    text-align: left;
    padding: 12px 16px;
    border: 1px solid #d0e8d8;
    border-radius: 6px;
    background: #fff;
    color: #1f6b3f;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;           /* 交互键不可选中复制 */
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: all 0.15s;
    opacity: 0;
    animation: choiceIn 0.3s ease forwards;
}
.input-choices .choice-btn:nth-child(1) { animation-delay: 0ms; }
.input-choices .choice-btn:nth-child(2) { animation-delay: 80ms; }
.input-choices .choice-btn:nth-child(3) { animation-delay: 160ms; }
.input-choices .choice-btn:nth-child(4) { animation-delay: 240ms; }
@keyframes choiceIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.choice-btn:hover {
    background: #f0faf3;
    border-color: #07c160;
    transform: translateX(3px);
}
.choice-btn:active { transform: translateX(0) scale(0.99); }

/* 只读输入框（无对话时） */
.input-box-readonly {
    opacity: 0.6;
}
.input-fake {
    height: 40px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
}

/* ============================================================
   移动端适配（html.mobile）：横屏三栏收窄 + 触控放大
   窗口已全屏，横屏手机宽度（约 667–932px）可容纳三栏
   ============================================================ */
/* 收窄左侧两栏，给聊天主区留足空间 */
html.mobile .chat-sidebar {
    width: 48px;
    padding-top: 16px;
    gap: 18px;
}
html.mobile .chat-list-panel { width: 200px; }

/* 会话项加大点击区 */
html.mobile .chat-session-item { padding: 14px 12px; }
html.mobile .session-name { font-size: 15px; }
html.mobile .session-preview { font-size: 13px; }

/* 消息气泡略放大，横屏可利用更宽区域 */
html.mobile .chat-messages { padding: 16px 18px; gap: 14px; }
html.mobile .msg-bubble { font-size: 15px; max-width: 72%; }
html.mobile .msg-avatar { width: 40px; height: 40px; }

/* 输入区放大触控 */
html.mobile .chat-input-area { min-height: 88px; padding: 12px 14px 14px; }
html.mobile .send-btn { padding: 12px 30px; font-size: 15px; }
html.mobile .choice-btn { padding: 14px 16px; font-size: 15px; }

/* 输入框字号 >= 16px，防止 iOS 聚焦时自动缩放 */
html.mobile .chat-input-area textarea,
html.mobile .chat-input-area input {
    font-size: 16px;
}

/* 极窄横屏（iPhone SE/8 667px）：进一步收窄会话列表 */
@media (max-width: 750px) {
    html.mobile .chat-list-panel { width: 160px; }
    html.mobile .session-preview { display: none; }
    html.mobile .msg-bubble { max-width: 80%; }
}

/* 触摸设备中和 hover 位移/残留态（保留 :active 反馈） */
@media (hover: none) {
    .choice-btn:hover {
        background: #fff;
        border-color: #d0e8d8;
        transform: none;
    }
    .send-btn:hover { background: #07c160; }
    .chat-session-item:hover { background: transparent; }
    .chat-session-item.active { background: #c9c9c9; }
    .sidebar-nav-item:hover { color: #7a7a7a; }
}

/* ============================================================
   手机竖屏两级页面（html.phone + orientation: portrait）
   列表视图 ↔ 会话视图，由 .phone-conv-open 类切换（chat.js）
   平板横屏/桌面：零影响
   ============================================================ */
/* 返回按钮（默认隐藏，仅手机竖屏显示） */
.conv-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin: 0 6px 0 -8px;
    border-radius: 50%;
    color: #1f1f1f;
    cursor: pointer;
    flex-shrink: 0;
}
.conv-back:active { background: rgba(0, 0, 0, .06); }

@media (orientation: portrait) {
    html.phone .conv-back { display: inline-flex; }

    /* 列表视图：隐藏右侧主面板，会话列表铺满 */
    html.phone .chat-app:not(.phone-conv-open) .chat-main-panel { display: none; }
    html.phone .chat-list-panel { flex: 1; width: auto; }

    /* 会话视图：隐藏左侧两栏，整屏交给会话 */
    html.phone .chat-app.phone-conv-open .chat-sidebar,
    html.phone .chat-app.phone-conv-open .chat-list-panel { display: none; }

    /* 窄屏布局微调 */
    html.phone .chat-messages { padding: 14px 12px; }
    html.phone .msg-bubble { max-width: 82%; }
    html.phone .chat-input-area { padding: 10px 10px 12px; }
    html.phone .send-btn { padding: 12px 22px; }
}