/* ============================================================
   pc.css — 仅桌面端生效（≥769px）
   由 HTML 以 <link media="screen and (min-width: 769px)"> 按需加载，
   文件内保留媒体查询作为兜底（直接引入本文件时同样生效）。
   加载顺序：base.css → pc.css → mobile.css
   ============================================================ */

/* ========== PC 端聊天页（chat.html：左侧会话栏 + 右侧聊天区） ========== */
@media screen and (min-width: 769px) {
    /* 主容器横向布局：左侧会话栏 + 右侧聊天区 */
    .chat-container {
        display: flex;
        flex-direction: row;
        max-width: 960px;
    }

    .chat-sidebar {
        display: flex;
        flex-direction: column;
        width: 280px;
        flex-shrink: 0;
        background: #f7f7f7;
        border-right: 1px solid #e7e7e7;
    }

    .sidebar-header {
        padding: 14px 15px;
        font-weight: bold;
        font-size: 15px;
        color: #333;
        border-bottom: 1px solid #e7e7e7;
        flex-shrink: 0;
    }

    .sidebar-room-list {
        flex: 1;
        overflow-y: auto;
    }

    .sidebar-room-item {
        display: flex;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid #efefef;
        align-items: center;
    }

    .sidebar-room-item:hover {
        background: #ececec;
    }

    .sidebar-room-item.active {
        background: #d9f2e5;
    }

    .sidebar-room-avatar {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        background: #c8c8c8;
        color: #fff;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .sidebar-room-text {
        flex: 1;
        min-width: 0;
    }

    .sidebar-room-name {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-room-last {
        font-size: 12px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 右侧聊天区纵向撑满 */
    .chat-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    /* 桌面端气泡收窄，更接近微信观感 */
    .msg-content {
        max-width: 55%;
    }
}

/* ========== PC 端列表页三栏（功能栏 + 列表 + 聊天区，微信网页版形态） ========== */
@media screen and (min-width: 769px) {
    .container {
        display: flex;
        flex-direction: row;
        max-width: 1280px;
    }

    /* 中间列表列初始固定 30%：min-width:0 解除内容（长文本最后一条消息）的
       min-content 下限，列宽不再被撑宽；右侧聊天区 flex:1 自动补足，
       两列加起来恒为 100%。列宽可通过分隔条拖拽（common.js initColResizer） */
    .list-left {
        flex: 0 0 30%;
        min-width: 0;
        overflow: hidden;
        border-right: 1px solid #e7e7e7;
    }

    /* 列宽拖拽分隔条：hover 浅灰、拖拽中品牌绿 */
    .col-resizer {
        display: block;
        flex: 0 0 5px;
        cursor: col-resize;
        background: transparent;
        touch-action: none;
        transition: background 0.15s;
    }

    .col-resizer:hover {
        background: #e0e0e0;
    }

    .col-resizer.dragging {
        background: #07c160;
    }

    .list-right {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
        background: #f5f5f5;
    }

    /* 未选中会话时的占位提示 */
    .detail-placeholder {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #9e9e9e;
        font-size: 14px;
        background: #f5f5f5;
    }

    /* 内嵌聊天面板纵向布局为全局规则（见 base.css .inline-chat） */

    /* 左侧列表项选中高亮 */
    .list-item-wrapper.detail-selected {
        background-color: #d9f2e5;
    }
}