/* ================================================
   微信风格UI增强样式
   WeChat-Style UI Enhancements
   优化整体视觉体验，参照微信设计
   ================================================ */

/* 全局颜色变量 - 微信配色方案 */
:root {
    --wechat-primary: #07C160;      /* 微信绿 */
    --wechat-bg: #EDEDED;            /* 浅灰背景 */
    --wechat-card-bg: #FFFFFF;       /* 卡片白色背景 */
    --wechat-text: #000000;          /* 主文本黑色 */
    --wechat-text-secondary: #888888; /* 次要文本灰色 */
    --wechat-border: #E5E5E5;        /* 边框浅灰 */
    --wechat-active: #06AD56;        /* 深绿色激活态 */
    --wechat-danger: #FA5151;        /* 危险红色 */
    --wechat-link: #576B95;          /* 链接蓝色 */
}

/* ================================================
   基础布局优化 - 微信风格
   ================================================ */

/* 整体页面背景 */
body {
    background-color: var(--wechat-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", 
                 "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 卡片样式 - 微信风格 */
.el-card {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05) !important;
    background-color: var(--wechat-card-bg) !important;
    margin-bottom: 8px !important;
}

.el-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* ================================================
   按钮优化 - 微信风格
   ================================================ */

/* 主要按钮 - 微信绿 */
.el-button--primary {
    background-color: var(--wechat-primary) !important;
    border-color: var(--wechat-primary) !important;
    border-radius: 4px !important;
    font-weight: 400 !important;
    transition: all 0.2s !important;
}

.el-button--primary:hover,
.el-button--primary:focus {
    background-color: var(--wechat-active) !important;
    border-color: var(--wechat-active) !important;
    transform: none !important;
    box-shadow: none !important;
}

.el-button--primary:active {
    background-color: #059048 !important;
    border-color: #059048 !important;
}

/* 危险按钮 */
.el-button--danger {
    background-color: var(--wechat-danger) !important;
    border-color: var(--wechat-danger) !important;
}

/* 默认按钮 */
.el-button--default {
    background-color: #FFFFFF !important;
    border: 1px solid var(--wechat-border) !important;
    color: var(--wechat-text) !important;
}

/* 文字按钮 */
.el-button--text {
    color: var(--wechat-link) !important;
}

/* 按钮组 */
.el-button-group {
    border-radius: 4px;
    overflow: hidden;
}

/* ================================================
   输入框优化 - 微信风格
   ================================================ */

.el-input__inner,
.el-textarea__inner {
    border-radius: 4px !important;
    border: 1px solid var(--wechat-border) !important;
    font-size: 16px !important;
    transition: all 0.2s !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
    border-color: var(--wechat-primary) !important;
    box-shadow: none !important;
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
    color: #C0C4CC !important;
}

/* ================================================
   对话框优化 - 微信风格
   ================================================ */

.el-dialog {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

.el-dialog__header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--wechat-border) !important;
    padding: 20px 24px !important;
}

.el-dialog__title {
    color: var(--wechat-text) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

.el-dialog__close {
    color: var(--wechat-text-secondary) !important;
    font-size: 18px !important;
}

.el-dialog__body {
    padding: 24px !important;
    color: var(--wechat-text) !important;
}

.el-dialog__footer {
    padding: 16px 24px !important;
    border-top: 1px solid var(--wechat-border) !important;
}

/* ================================================
   列表和表格 - 微信风格
   ================================================ */

.el-table {
    background-color: var(--wechat-card-bg) !important;
    border-radius: 8px !important;
}

.el-table th {
    background-color: #FAFAFA !important;
    color: var(--wechat-text-secondary) !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--wechat-border) !important;
}

.el-table td {
    border-bottom: 1px solid #F5F5F5 !important;
}

.el-table tbody tr:hover {
    background-color: #FAFAFA !important;
}

/* 列表项 */
.el-menu-item,
.el-submenu__title {
    border-radius: 6px !important;
    margin: 2px 8px !important;
}

.el-menu-item.is-active {
    background-color: #F0F9FF !important;
    color: var(--wechat-primary) !important;
}

/* ================================================
   消息和通知 - 微信风格
   ================================================ */

.el-message {
    min-width: 300px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: none !important;
}

.el-message--success {
    background-color: #FFFFFF !important;
    border-left: 4px solid var(--wechat-primary) !important;
}

.el-message--error {
    background-color: #FFFFFF !important;
    border-left: 4px solid var(--wechat-danger) !important;
}

.el-message--warning {
    background-color: #FFFFFF !important;
    border-left: 4px solid #FFB800 !important;
}

.el-notification {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* ================================================
   表单优化 - 微信风格
   ================================================ */

.el-form-item__label {
    color: var(--wechat-text) !important;
    font-weight: 500 !important;
    line-height: 32px !important;
}

.el-form-item__error {
    color: var(--wechat-danger) !important;
    font-size: 12px !important;
}

/* 单选框和复选框 */
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: var(--wechat-primary) !important;
    border-color: var(--wechat-primary) !important;
}

.el-radio__label,
.el-checkbox__label {
    color: var(--wechat-text) !important;
}

/* 开关 */
.el-switch.is-checked .el-switch__core {
    background-color: var(--wechat-primary) !important;
}

/* ================================================
   聊天界面优化 - 微信风格
   ================================================ */

/* 聊天列表 */
.chat-list {
    background-color: var(--wechat-card-bg);
    border-right: 1px solid var(--wechat-border);
}

.chat-item {
    padding: 12px 16px;
    border-bottom: 1px solid #F5F5F5;
    transition: background-color 0.2s;
}

.chat-item:hover {
    background-color: #F5F5F5;
}

.chat-item.active {
    background-color: #E5E5E5;
}

/* 聊天气泡 */
.message-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 8px;
    word-break: break-word;
    line-height: 1.4;
}

/* 自己发送的消息 - 微信绿 */
.message-bubble.mine {
    background-color: var(--wechat-primary);
    color: #FFFFFF;
    border-top-right-radius: 2px;
}

/* 对方发送的消息 - 白色 */
.message-bubble.other {
    background-color: #FFFFFF;
    color: var(--wechat-text);
    border: 1px solid #E5E5E5;
    border-top-left-radius: 2px;
}

/* 消息时间 */
.message-time {
    color: var(--wechat-text-secondary);
    font-size: 12px;
    text-align: center;
    margin: 8px 0;
}

/* ================================================
   头像优化 - 微信风格
   ================================================ */

.avatar {
    border-radius: 6px;
    background-color: #F5F5F5;
}

.avatar-round {
    border-radius: 50%;
}

/* 在线状态指示器 */
.online-indicator {
    width: 8px;
    height: 8px;
    background-color: var(--wechat-primary);
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ================================================
   音视频通话界面 - 微信风格
   ================================================ */

/* 通话控制按钮 */
.rtc-control-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.rtc-control-button:hover {
    transform: scale(1.05);
    background-color: #FFFFFF;
}

.rtc-control-button:active {
    transform: scale(0.95);
}

/* 挂断按钮 - 红色 */
.rtc-control-button.hangup {
    background-color: var(--wechat-danger);
    color: #FFFFFF;
}

/* 接听按钮 - 绿色 */
.rtc-control-button.answer {
    background-color: var(--wechat-primary);
    color: #FFFFFF;
}

/* 通话状态文字 */
.rtc-status-text {
    color: #FFFFFF;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-top: 16px;
}

/* ================================================
   加载动画 - 微信风格
   ================================================ */

.loading-spinner {
    border: 3px solid rgba(7,193,96,0.2);
    border-top-color: var(--wechat-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   标签页 - 微信风格
   ================================================ */

.el-tabs__item {
    color: var(--wechat-text-secondary) !important;
    font-weight: 400 !important;
}

.el-tabs__item.is-active {
    color: var(--wechat-primary) !important;
    font-weight: 500 !important;
}

.el-tabs__active-bar {
    background-color: var(--wechat-primary) !important;
    height: 3px !important;
}

/* ================================================
   下拉菜单 - 微信风格
   ================================================ */

.el-dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    border: none !important;
    padding: 4px 0 !important;
}

.el-dropdown-menu__item {
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: var(--wechat-text) !important;
}

.el-dropdown-menu__item:hover {
    background-color: #F5F5F5 !important;
    color: var(--wechat-text) !important;
}

/* ================================================
   弹出框 - 微信风格
   ================================================ */

.el-popover {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    border: none !important;
}

/* ================================================
   步骤条 - 微信风格
   ================================================ */

.el-step__icon.is-finish {
    background-color: var(--wechat-primary) !important;
    border-color: var(--wechat-primary) !important;
}

.el-step__title.is-finish {
    color: var(--wechat-primary) !important;
}

/* ================================================
   进度条 - 微信风格
   ================================================ */

.el-progress-bar__inner {
    background-color: var(--wechat-primary) !important;
}

/* ================================================
   标签 - 微信风格
   ================================================ */

.el-tag {
    border-radius: 4px !important;
    border: none !important;
    font-size: 12px !important;
}

.el-tag--success {
    background-color: rgba(7,193,96,0.1) !important;
    color: var(--wechat-primary) !important;
}

.el-tag--danger {
    background-color: rgba(250,81,81,0.1) !important;
    color: var(--wechat-danger) !important;
}

/* ================================================
   分页 - 微信风格
   ================================================ */

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--wechat-primary) !important;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: var(--wechat-primary) !important;
}

/* ================================================
   搜索框 - 微信风格
   ================================================ */

.search-box {
    background-color: #F5F5F5;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.search-box input {
    background-color: transparent;
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: var(--wechat-text);
}

.search-box input::placeholder {
    color: var(--wechat-text-secondary);
}

/* ================================================
   底部导航 - 微信风格
   ================================================ */

.bottom-nav {
    background-color: var(--wechat-card-bg);
    border-top: 1px solid var(--wechat-border);
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    color: var(--wechat-text-secondary);
    font-size: 10px;
    transition: color 0.2s;
}

.bottom-nav-item.active {
    color: var(--wechat-primary);
}

.bottom-nav-item .icon {
    font-size: 24px;
    margin-bottom: 2px;
}

/* ================================================
   滚动条美化 - 微信风格
   ================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

/* ================================================
   响应式优化 - 移动端
   ================================================ */

@media (max-width: 768px) {
    .el-dialog {
        width: 90% !important;
        margin: 0 auto !important;
    }
    
    .message-bubble {
        max-width: 80%;
    }
    
    .rtc-control-button {
        width: 50px;
        height: 50px;
    }
}

/* ================================================
   动画效果
   ================================================ */

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* 滑入动画 */
@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* ================================================
   特殊效果
   ================================================ */

/* 微信长按效果 */
.long-press {
    position: relative;
}

.long-press::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.05);
    opacity: 0;
    transition: opacity 0.2s;
}

.long-press.active::after {
    opacity: 1;
}

/* 微信红点提示 */
.badge-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: var(--wechat-danger);
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

.badge-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--wechat-danger);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    border: 2px solid #FFFFFF;
}

/* ================================================
   END - 微信风格UI增强样式
   ================================================ */