/* ===== 侧边栏样式 - iOS拟物化现代化风格 ===== */
.sidebar{ /* 侧边栏主容器 */
    width:260px; /* 宽度 */
    min-width:260px; /* 最小宽度 */
    flex-shrink:0; /* 不收缩 */
    background:linear-gradient(180deg,#fff 0%,#f8f9fa 100%); /* iOS渐变背景 */
    border-right:0.5px solid rgba(0,0,0,.08); /* 细腻边框 */
    display:flex; /* 弹性布局 */
    flex-direction:column; /* 垂直排列 */
    overflow:hidden; /* 隐藏溢出 */
    z-index:100; /* 层级 */
    /* 电脑端过渡动画：先快后慢非线性展开 */
    transition:width .4s cubic-bezier(.22,.61,.36,1),min-width .4s cubic-bezier(.22,.61,.36,1),opacity .35s ease
}
.sidebar.collapsed{ /* 折叠状态 */
    width:0; /* 宽度为0 */
    min-width:0; /* 最小宽度为0 */
    opacity:0; /* 透明 */
    /* 继承主容器的transition，确保折叠过程有动画 */
    transition:width .4s cubic-bezier(.22,.61,.36,1),min-width .4s cubic-bezier(.22,.61,.36,1),opacity .35s ease
}
/* ===== 手机端侧边栏 - iOS风格 ===== */
@media (max-width: 768px) { /* 小屏幕响应式 */
    .sidebar{ /* 侧边栏改为绝对定位 */
        position:absolute; /* 绝对定位 */
        left:0; /* 左侧 */
        top:0; /* 顶部 */
        height:100vh; /* 占满视口高度 */
        width:300px; /* 宽度300px，更舒适 */
        z-index:999; /* 最高层级 */
        /* iOS风格阴影：柔和多层次 */
        box-shadow:4px 0 20px rgba(0,0,0,.12),0 0 1px rgba(0,0,0,.04);
        /* 手机端过渡：向左滑入/滑出，先快后慢 */
        transform:translateX(0); /* 默认展开位置 */
        opacity:1;
        transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
        will-change:transform,opacity; /* 提示浏览器优化 */
    }
    .sidebar.collapsed{ /* 折叠状态：向左滑出屏幕 */
        transform:translateX(-100%);
        opacity:0; /* 渐变消失 */
        /* 手机端必须重新声明transition，防止被媒体查询外的.collapsed覆盖导致transform动画丢失 */
        transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
    }
}

/* ===== 现代化滚动条样式 ===== */
.chat-list{ /* 聊天列表容器 */
    flex:1; /* 占满剩余空间 */
    overflow-y:auto; /* 垂直滚动 */
    overflow-x:hidden; /* 隐藏横向滚动 */
    padding:0 12px 12px; /* 内边距 */
    /* iOS滚动优化 */
    -webkit-overflow-scrolling:touch
}
/* WebKit滚动条样式 */
.chat-list::-webkit-scrollbar{ /* 滚动条轨道 */
    width:6px /* 宽度6px */
}
.chat-list::-webkit-scrollbar-track{ /* 滚动条轨道背景 */
    background:transparent /* 透明背景 */
}
.chat-list::-webkit-scrollbar-thumb{ /* 滚动条滑块 */
    background:rgba(0,0,0,.15); /* 半透明黑色 */
    border-radius:3px; /* 圆角 */
    transition:background .2s ease /* 过渡 */
}
.chat-list::-webkit-scrollbar-thumb:hover{ /* 悬停滑块 */
    background:rgba(0,0,0,.25) /* 颜色加深 */
}
/* Firefox滚动条样式 */
.chat-list{ /* Firefox滚动条 */
    scrollbar-width:thin; /* 细滚动条 */
    scrollbar-color:rgba(0,0,0,.15) transparent /* 滑块颜色和轨道颜色 */
}

/* ===== 新建聊天按钮 - iOS拟物化风格 ===== */
.new-chat{ /* 新建聊天按钮 */
    margin:14px 10px; /* 外边距 */
    padding:11px 0; /* 内边距 */
    background:linear-gradient(135deg,#007aff 0%,#0051d5 100%); /* iOS蓝色渐变 */
    color:#fff; /* 白色文字 */
    border:none; /* 无边框 */
    border-radius:12px; /* iOS圆角 */
    font-size:13px; /* 字体大小 */
    font-weight:600; /* 中等粗细 */
    letter-spacing:0.3px; /* 字间距 */
    cursor:pointer; /* 鼠标指针 */
    display:flex; /* 弹性布局 */
    align-items:center; /* 垂直居中 */
    justify-content:center; /* 水平居中 */
    gap:6px; /* 间距 */
    /* iOS风格阴影：柔和且有层次 */
    box-shadow:
        0 4px 12px rgba(0,122,255,.3), /* 主阴影 */
        0 2px 4px rgba(0,122,255,.15), /* 次阴影 */
        inset 0 1px 0 rgba(255,255,255,.2); /* 顶部高光 */
    position:relative; /* 相对定位 */
    overflow:hidden; /* 隐藏溢出 */
    /* 平滑过渡，只动画必要的属性 */
    transition:transform .15s ease,box-shadow .15s ease;
    -webkit-tap-highlight-color:transparent /* iOS无点击高亮 */
}
.new-chat::before{ /* 按钮光泽效果 */
    content:''; /* 内容 */
    position:absolute; /* 绝对定位 */
    inset:0; /* 占满 */
    background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 50%); /* 光泽渐变 */
    opacity:0; /* 透明 */
    transition:opacity .15s ease; /* 过渡 */
}
.new-chat:hover{ /* 悬停效果 - 电脑端 */
    background:linear-gradient(135deg,#0063e5 0%,#0048b8 100%); /* 颜色加深 */
    box-shadow:
        0 6px 16px rgba(0,122,255,.4), /* 阴影增强 */
        0 3px 6px rgba(0,122,255,.2),
        inset 0 1px 0 rgba(255,255,255,.2)
}
.new-chat:active{ /* 按下效果 - 拟物化 */
    transform:scale(0.97); /* 轻微缩小 */
    box-shadow:
        0 2px 8px rgba(0,122,255,.35), /* 阴影减弱 */
        0 1px 2px rgba(0,122,255,.15),
        inset 0 2px 4px rgba(0,0,0,.15), /* 内阴影 */
        inset 0 1px 0 rgba(255,255,255,.1); /* 顶部高光减弱 */
}
.new-chat:focus{ /* 聚焦效果 */
    outline:none; /* 无轮廓 */
    box-shadow:
        0 4px 12px rgba(0,122,255,.3),
        0 2px 4px rgba(0,122,255,.15),
        inset 0 1px 0 rgba(255,255,255,.2),
        0 0 0 4px rgba(0,122,255,.2) /* 聚焦光圈 */
}

/* ===== 聊天项 - iOS卡片风格 ===== */
.chat-item{ /* 单个聊天项 */
    padding:9px 12px; /* 内边距 */
    border-radius:10px; /* iOS圆角 */
    cursor:pointer; /* 鼠标指针 */
    font-size:13px; /* 字体大小 */
    color:#1d1d1f; /* iOS深色文字 */
    display:flex; /* 弹性布局 */
    justify-content:space-between; /* 两端对齐 */
    align-items:center; /* 垂直居中 */
    margin-bottom:4px; /* 间距 */
    background:rgba(255,255,255,.6); /* 半透明白色背景 */
    /* iOS风格边框 */
    border:0.5px solid rgba(0,0,0,.06);
    /* 平滑过渡 */
    transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
    position:relative; /* 相对定位 */
    z-index:0; /* 层级 */
    -webkit-tap-highlight-color:transparent /* iOS无点击高亮 */
}
.chat-item.chat-item-fast{ /* 快速显示的聊天项 */
    animation:none; /* 无动画 */
    opacity:1 /* 不透明 */
}
.chat-item.has-dropdown{ /* 有下拉菜单 */
    z-index:99 /* 提高层级 */
}
.chat-item.active{ /* 激活状态 */
    background:linear-gradient(135deg,#e8f2ff 0%,#f0f6ff 100%); /* iOS蓝色渐变背景 */
    color:#007aff; /* iOS蓝色文字 */
    font-weight:600; /* 加粗 */
    border-color:rgba(0,122,255,.2); /* 蓝色边框 */
    box-shadow:0 2px 8px rgba(0,122,255,.15); /* 柔和阴影 */
}
.chat-item:hover{ /* 悬停效果 */
    background:rgba(242,242,247,.8); /* iOS浅灰背景 */
    transform:translateX(2px); /* 轻微右移 */
    box-shadow:0 2px 8px rgba(0,0,0,.06); /* 柔和阴影 */
}
.chat-item-text{ /* 聊天项文字 */
    flex:1; /* 占满剩余空间 */
    white-space:nowrap; /* 单行显示 */
    overflow:hidden; /* 隐藏溢出 */
    text-overflow:ellipsis; /* 超出省略 */
    letter-spacing:-0.2px; /* 字间距 */
}
.chat-menu-btn{ /* 聊天菜单按钮 */
    width:22px; /* 宽度 */
    height:22px; /* 高度 */
    border:none; /* 无边框 */
    background:transparent; /* 透明背景 */
    opacity:0; /* 默认隐藏 */
    cursor:pointer; /* 鼠标指针 */
    color:#8e8e93; /* iOS灰色 */
    font-size:16px; /* 图标大小 */
    border-radius:5px; /* 小圆角 */
    padding:2px; /* 内边距 */
    display:flex; /* 弹性布局 */
    align-items:center; /* 垂直居中 */
    justify-content:center; /* 水平居中 */
    transition:all .15s ease; /* 过渡 */
    -webkit-tap-highlight-color:transparent /* iOS无点击高亮 */
}
.chat-item:hover .chat-menu-btn{ /* 悬停时显示菜单按钮 */
    opacity:1 /* 不透明 */
}
.chat-menu-btn:hover{ /* 悬停菜单按钮 */
    background:rgba(0,0,0,.05); /* 浅灰背景 */
    color:#1d1d1f; /* 深色 */
}
.chat-menu-btn:active{ /* 按下菜单按钮 */
    transform:scale(0.9); /* 缩小 */
    background:rgba(0,0,0,.1); /* 深灰背景 */
}

/* ===== 下拉菜单 - iOS风格 ===== */
.chat-dropdown{ /* 下拉菜单容器 */
    position:absolute; /* 绝对定位 */
    background:rgba(255,255,255,.95); /* 半透明白色 */
    backdrop-filter:blur(20px); /* 背景模糊 */
    -webkit-backdrop-filter:blur(20px); /* Safari支持 */
    border-radius:12px; /* iOS圆角 */
    /* iOS风格阴影：柔和且有层次 */
    box-shadow:
        0 8px 32px rgba(0,0,0,.15), /* 主阴影 */
        0 2px 8px rgba(0,0,0,.08), /* 次阴影 */
        inset 0 1px 0 rgba(255,255,255,.5); /* 顶部高光 */
    width:140px; /* 宽度 */
    z-index:9999; /* 最高层级 */
    opacity:0; /* 透明 */
    transform:translateY(-8px) scale(0.95); /* 初始位置 */
    pointer-events:none; /* 不可点击 */
    /* 只动画transform和opacity */
    transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s ease;
    overflow:hidden; /* 隐藏溢出 */
    top:auto; /* 自动定位 */
    bottom:-45px; /* 底部位置 */
    right:-12px; /* 右侧位置 */
    /* iOS风格边框 */
    border:0.5px solid rgba(0,0,0,.08)
}
.chat-dropdown.show{ /* 显示下拉菜单 */
    opacity:1; /* 不透明 */
    transform:translateY(0) scale(1); /* 正常位置 */
    pointer-events:all /* 可点击 */
}
.dropdown-item{ /* 下拉菜单项 */
    padding:10px 14px; /* 内边距 */
    font-size:13px; /* 字体大小 */
    color:#1d1d1f; /* iOS深色文字 */
    cursor:pointer; /* 鼠标指针 */
    transition:background .15s ease; /* 过渡 */
    -webkit-tap-highlight-color:transparent /* iOS无点击高亮 */
}
.dropdown-item:hover{ /* 悬停菜单项 */
    background:rgba(242,242,247,.8); /* iOS浅灰背景 */
}
.dropdown-item.delete{ /* 删除选项 */
    color:#ff3b30; /* iOS红色 */
    font-weight:500 /* 中等粗细 */
}
.dropdown-item.delete:hover{ /* 悬停删除选项 */
    background:rgba(255,59,48,.08) /* 浅红背景 */
}
.dropdown-item:active{ /* 按下菜单项 */
    background:rgba(0,0,0,.05) /* 深灰背景 */
}