/**
 * 孟坤html聊天框 v1.0.0
 * Copyright 2011-2016 mengkunsoft, Inc.
 * Licensed under MIT 
 */

/* 通用重置和盒模型设置 */
*, ::before, ::after {
    box-sizing: border-box; /* 所有元素使用border-box盒模型 */
}
 
/* HTML和BODY基础样式 */
html,body{
    height: 100%;           /* 高度撑满整个视口 */
    margin: 0;              /* 去除默认边距 */
    padding: 0;             /* 去除默认内边距 */
}

/* 页面主体样式 */
body{
    max-width:800px;        /* 最大宽度800px，居中布局 */
    margin:0 auto;          /* 水平居中 */
}

/* ====== 聊天消息区域样式 ====== */
.mk-chat-box{
    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; /* 字体设置 */
    font-size:16px;             /* 基础字号 */
    width: 100%;                /* 宽度100% */
    padding: 0;                 /* 无内边距 */
    position:relative;          /* 相对定位 */
    overflow-y: scroll;         /* 垂直滚动 */
    overflow-x: hidden;         /* 水平隐藏 */
    height: calc(100% - 130px); /* 高度计算：视口高度减去顶部40px+底部50px+编辑框40px=130px */
    border: 1px solid #eceff1;  /* 边框样式 */
    border-bottom:0;            /* 底部无边框（避免与编辑框重叠） */
}

/* ====== 顶部标题栏样式 ====== */
.top{
    padding-left:10px;          /* 左侧内边距 */
    background-color: #eceff1;  /* 背景色 */
    height:40px;                /* 固定高度 */
    line-height:40px;           /* 行高与高度一致，实现垂直居中 */
    text-align:center;          /* 文本水平居中 */
}

/* ====== 底部信息栏样式 ====== */
.foot{
    line-height:50px;           /* 行高50px */
    text-align:center;          /* 文本居中 */
    font-size:12px;             /* 小字号 */
}

/* ====== 编辑输入区域容器样式 ====== */
.write{
    height:40px;                /* 固定高度40px */
    width: 100%;                /* 宽度100% */
}

/* ====== 输入框样式 ====== */
.write input { 
    font-size: 16px;                    /* 输入文字大小 */
    float: left;                        /* 左浮动，与按钮并排 */
    width: calc(100% - 60px);           /* 宽度计算：总宽度减去按钮60px */
    height: 40px;                       /* 高度40px */
    padding: 0 10px;                    /* 左右内边距 */
    border-radius:0;                    /* 无圆角 */
    border: 0;                          /* 无边框 */
    outline: none;                      /* 去掉聚焦轮廓 */
    background:#eceff1;                 /* 背景色 */
    font-family: 'Source Sans Pro', sans-serif; /* 输入框字体 */
    font-weight: 400;                   /* 字体粗细 */
}

/* 刷新按钮文字颜色 */
#fresh{
    color:#fff                          /* 白色文字 */
}

/* ====== 发送按钮样式 ====== */
.send{
    color:#fff;                         /* 白色文字 */
    text-decoration:none;               /* 无下划线 */
    width:60px;                         /* 固定宽度60px */
    background-color: #007bff;          /* 蓝色背景 */
    display:inline-block;               /* 行内块元素 */
    height: 40px;                       /* 高度40px */
    line-height:40px;                   /* 行高40px，垂直居中 */
    text-align:center;                  /* 文本居中 */
}

/* 发送按钮禁用状态样式 */
.send.disabled{
    background-color: #cccccc;          /* 灰色背景表示禁用 */
}

/* ====== 单条消息容器样式 ====== */
.mk-chat-box .msg{ 
    margin: 4px 6px;                    /* 上下4px，左右6px外边距 */
    position: relative;                  /* 相对定位，为头像定位做准备 */
    min-height: 40px;                   /* 最小高度40px */
    border: 0;                          /* 无边框 */
}

/* 右侧消息对齐方式 */
.mk-chat-box .right{
    text-align: right;                  /* 文本右对齐 */
    margin-left: 64px;                  /* 左侧外边距64px（为头像留空间） */
}

/* 左侧消息对齐方式 */
.mk-chat-box .left{
    text-align: left;                   /* 文本左对齐 */
    margin-right: 64px;                 /* 右侧外边距64px（为头像留空间） */
}

/* ====== 头像样式 ====== */
.mk-chat-box img.head{ 
    width: 32px;                        /* 宽度32px */
    height: 32px;                       /* 高度32px */
    top: 8px;                           /* 距离顶部8px */
    position: absolute;                 /* 绝对定位 */
    -moz-border-radius: 100%;           /* Firefox圆角 */
    -webkit-border-radius: 100%;        /* Safari和Chrome圆角 */
    border-radius: 100%;                /* 标准圆角，圆形 */
    border: 1px solid #cbe5c8;          /* 边框 */
    -moz-user-select: none;             /* Firefox禁止用户选中 */
    -o-user-select: none;               /* Opera禁止用户选中 */
    -khtml-user-select: none;           /* Konqueror禁止用户选中 */
    -webkit-user-select: none;          /* Webkit禁止用户选中 */
    -ms-user-select: none;              /* IE禁止用户选中 */
    user-select: none;                  /* 标准禁止用户选中 */
}

/* 右侧消息头像位置 */
.mk-chat-box .right img.head{
    right: 0;                           /* 靠右对齐 */
}

/* 左侧消息头像位置 */
.mk-chat-box .left img.head{
    left: 0;                            /* 靠左对齐 */
}

/* ====== 用户昵称样式 ====== */
.mk-chat-box .name{    
    color: #8b8b8b;                     /* 灰色文字 */
    font-size: 12px;                    /* 小字号 */
    display: block;                     /* 块级元素 */
    line-height: 18px;                  /* 行高18px */
}

/* 右侧消息昵称边距 */
.mk-chat-box .right .name{
    margin: 0 48px 2px 0;               /* 右外边距48px，底部2px */
}

/* 左侧消息昵称边距 */
.mk-chat-box .left .name{
    margin: 0 0 2px 48px;               /* 左外边距48px，底部2px */
}

/* ====== 消息内容气泡样式 ====== */
.mk-chat-box .content{ 
    word-break: break-all;              /* 强制换行 */
    word-wrap: break-word;              /* 支持长单词换行 */
    text-align: left;                   /* 内容文本左对齐 */
    position: relative;                 /* 相对定位，为尖角做准备 */
    display: inline-block;              /* 行内块元素 */
    font-size: 14px;                    /* 字号14px */
    padding: 6px;                       /* 内边距6px */
    line-height: 18px;                  /* 行高18px */
    -moz-border-radius: 6px;            /* Firefox圆角 */
    -webkit-border-radius: 6px;         /* Safari和Chrome圆角 */
    border-radius: 6px;                 /* 标准圆角 */
    min-width: 9px;                     /* 最小宽度，防止空白消息变形 */
    min-height: 18px;                   /* 最小高度 */
}

/* 消息内容中的图片样式 */
.mk-chat-box .content img{  
    width: 100%;                        /* 宽度100%自适应 */
    *:width: auto;                      /* 低版本IE兼容 */
    *:max-width: 100%;                  /* 低版本IE兼容 */
    height: auto;                       /* 高度自适应 */
}

/* 消息内容中的超链接样式 */
.mk-chat-box .content a{  
    color: #0072C1;                     /* 链接颜色 */
    margin: 0 5px;                      /* 左右边距 */
    cursor: hand;                       /* 手型光标（旧版） */
}

/* ====== 右侧消息气泡样式 ====== */
.mk-chat-box .right .content{
    margin: 0 48px 0 0;                 /* 右边距48px（为头像留空间） */
    border: 1px solid #78cdf8;          /* 边框 */
    background: #78cdf8;                /* 蓝色背景 */
}

/* ====== 左侧消息气泡样式 ====== */
.mk-chat-box .left .content{
    margin: 0 0 0 48px;                 /* 左边距48px（为头像留空间） */
    border: 1px solid #CDD7E2;          /* 边框 */
    background: #CDD7E2;                /* 浅灰色背景 */
}

/* ====== 消息气泡尖角样式 ====== */
.mk-chat-box .content:after{   
    content: "";                        /* 伪元素内容为空 */
    position: absolute;                 /* 绝对定位 */
    border-bottom: 8px solid rgba(255, 255, 255, 0); /* 透明边框，创建尖角 */
}

/* 右侧消息尖角位置和颜色 */
.mk-chat-box .right .content:after{
    right: -12px;                       /* 从右侧突出 */
    top: 8px;                           /* 距离顶部8px */
    border-left: 12px solid #78cdf8;    /* 左侧边框，形成尖角 */
}

/* 左侧消息尖角位置和颜色 */
.mk-chat-box .left .content:after{
    left: -12px;                        /* 从左侧突出 */
    top: 8px;                           /* 距离顶部8px */
    border-right: 12px solid #cdd7e2;   /* 右侧边框，形成尖角 */
}

/* ====== 系统提示消息样式 ====== */
.mk-chat-box .tips{ 
    margin: 12px;                       /* 外边距12px */
    text-align: center;                 /* 文本居中 */
    font-size: 12px;                    /* 小字号 */
}

/* 提示消息内的span样式 */
.mk-chat-box .tips span{
    display: inline-block;              /* 行内块元素 */
    padding: 4px;                       /* 内边距 */
    background-color: #cccccc;          /* 默认灰色背景 */
    color: #ffffff;                     /* 白色文字 */
    -moz-border-radius: 6px;            /* Firefox圆角 */
    -webkit-border-radius: 6px;         /* Safari和Chrome圆角 */
    border-radius: 6px;                 /* 标准圆角 */
}

/* 不同类型的提示消息颜色 */
.mk-chat-box .tips .tips-primary{
    background-color: #428bca;          /* 主要提示 - 蓝色 */
}
.mk-chat-box .tips .tips-success{
    background-color: #5cb85c;          /* 成功提示 - 绿色 */
}
.mk-chat-box .tips .tips-info{
    background-color: #5bc0de;          /* 信息提示 - 青色 */
}
.mk-chat-box .tips .tips-warning{
    background-color: #f0ad4e;          /* 警告提示 - 橙色 */
}
.mk-chat-box .tips .tips-danger{
    background-color: #d9534f;          /* 危险提示 - 红色 */
}

/* ====== 滚动条美化 ====== */
.mk-chat-box::-webkit-scrollbar{
    width:8px;                          /* 滚动条宽度 */
    height:8px;                         /* 滚动条高度 */
}
.mk-chat-box::-webkit-scrollbar-button:vertical{
    display:none;                       /* 隐藏垂直滚动条按钮 */
}
.mk-chat-box::-webkit-scrollbar-track:vertical{
    background-color:transparent;       /* 滚动条轨道透明 */
}
.mk-chat-box::-webkit-scrollbar-track-piece{
    background-color:transparent;       /* 滚动条轨道块透明 */
}
.mk-chat-box::-webkit-scrollbar-thumb:vertical{
    background-color:rgba(204,204,204,.3); /* 滚动条滑块颜色 */
    border-radius:8px;                  /* 圆角 */
}
.mk-chat-box::-webkit-scrollbar-thumb:vertical:hover,
.mk-chat-box::-webkit-scrollbar-thumb:vertical:active {
    background-color: #8C8C8C;          /* 悬停和激活状态颜色 */
}

/* ====== 登录框样式 ====== */
.login{
    margin-top:10px;                    /* 顶部外边距 */
}





/* ====== 只美化编辑框部分（输入框和按钮） ====== */

/* 编辑框容器 - 添加圆角和阴影 */
.write {
    height: 40px;
    width: 100%;
    border-radius: 8px;                     /* 添加圆角 */
    overflow: hidden;                       /* 防止子元素溢出 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    border: 1px solid #e0e7ff;             /* 添加边框 */
    transition: all 0.3s ease;             /* 平滑过渡 */
}

.write:focus-within {
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); /* 聚焦时阴影加深 */
    border-color: #007bff;                  /* 聚焦时边框变色 */
}

/* 输入框美化 */
.write input { 
    font-size: 16px;
    float: left;
    width: calc(100% - 60px);
    height: 40px;
    padding: 0 15px;                       /* 增加内边距 */
    border-radius: 0;
    border: 0;
    outline: none;
    background: #ffffff;                   /* 改为白色背景 */
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    color: #333;                           /* 文字颜色 */
    transition: background 0.3s ease;      /* 背景过渡 */
}

.write input::placeholder {
    color: #999;                           /* 占位符颜色 */
    transition: color 0.3s ease;           /* 颜色过渡 */
}

.write input:focus {
    background: #f8f9ff;                   /* 聚焦时淡蓝色背景 */
}

.write input:focus::placeholder {
    color: #ccc;                           /* 聚焦时占位符变淡 */
}

/* 发送按钮美化 */
.send {
    color: #fff;
    text-decoration: none;
    width: 60px;
    background: linear-gradient(135deg, #007bff, #0056cc); /* 渐变背景 */
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-weight: 600;                      /* 加粗字体 */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;             /* 所有属性过渡 */
    position: relative;                    /* 为伪元素定位 */
}

.send:hover {
    background: linear-gradient(135deg, #0056cc, #0047b3); /* 悬停时深色渐变 */
    transform: translateY(-1px);          /* 轻微上浮效果 */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* 悬停时阴影 */
}

.send:active {
    transform: translateY(0);              /* 点击时恢复位置 */
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); /* 点击时阴影减小 */
}

/* 发送按钮添加箭头图标 */
.send::after {
    content: '';                         /* 箭头图标 */
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    transition: transform 0.3s ease;      /* 图标动画 */
}

.send:hover::after {
    transform: translateX(3px);           /* 悬停时箭头向右移动 */
}

/* 发送按钮禁用状态美化 */
.send.disabled {
    background: linear-gradient(135deg, #cccccc, #999999); /* 灰色渐变 */
    cursor: not-allowed;                  /* 禁用光标 */
    transform: none !important;           /* 禁用悬停效果 */
    box-shadow: none !important;          /* 禁用阴影 */
}

/* 登录输入框美化 */
.login input {
    font-size: 16px;
    width: calc(100% - 60px);
    height: 40px;
    padding: 0 15px;
    border: 2px solid #e0e0e0;            /* 添加边框 */
    border-radius: 6px;                   /* 圆角 */
    outline: none;
    background: #ffffff;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    transition: all 0.3s ease;            /* 所有属性过渡 */
}

.login input:focus {
    border-color: #007bff;                /* 聚焦时边框变色 */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); /* 聚焦时外发光 */
    background: #f8f9ff;                  /* 聚焦时背景色 */
}