/* ============================================================
   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;
    border-radius: 50%;
    background: #ff3b30;
    border: 1px solid #e7e7e7;
}

/* ==================== 聊天主区 ==================== */
.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); }
}
/* 字体缺字降级：强制安全 CJK 字体栈，杜绝豆腐块 */
.glyph-fallback .msg-glitch-text {
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
    letter-spacing: 1px;
}

/* 消息淡入动画 */
.msg-appear {
    animation: msgAppear 0.28s ease;
}
@keyframes msgAppear {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ==================== 顶栏「正在输入」指示 ==================== */
.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-time-divider {
    align-self: center;
    margin: 2px 0;
}
/* 会话间隔留白：新一次对话开始处的纯空白（无时间框时使用），
   高度近似时间分隔框占位，避免两次对话粘连 */
.msg-session-gap {
    height: 28px;
    flex: none;
}
.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;
    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;
    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; }
}