/**
 * 在线客服 kefu.php（微信风气泡）
 *
 * 版式是「顶栏固定 + 中间滚动 + 底部输入固定」的三段式，
 * 没走 common.css 的 .page/.card —— 那套是表单页的版式，
 * 聊天页需要中间区域独立滚动、输入框永远贴底。
 *
 * 用 position:fixed 而不是 flex 布局：目标机型里有旧内核，
 * flex 的 min-height:0 那套在老 WebKit 上不稳，fixed + 固定内边距最保险。
 */
.kf-body {
    background-color: #ede9e3;
}

/* ---------------------------------------------------------
 * 顶栏
 *
 * 尺寸与配色对齐全站的 .topbar（common.css）：高 1.28rem、底色 #b80404，
 * 返回箭头 0.24x0.42。
 * ⚠ 箭头原图 image/ico-back.svg 是 24x42 的竖长条，
 *   之前按 0.4x0.4 正方形拉，箭头会被压扁拉长 —— 必须保持 24:42 这个比例。
 *   它本身描边就是白色（stroke #FFFFFF），不要再加 invert 滤镜。
 * ------------------------------------------------------- */
.kf-top {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    width: 100%;
    height: 1.28rem;
    background-color: #b80404;
    text-align: center;
}

.kf-top__back {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 1.4rem;
    height: 1.28rem;
}

.kf-top__back img {
    position: absolute;
    left: 0.42rem;
    top: 50%;
    width: 0.24rem;
    height: 0.42rem;
    margin-top: -0.21rem;
}

/* 标题与「对方状态」上下叠在一起，整体在 1.28rem 内垂直居中。
   状态那行为空时（刚进页面还没轮询到）标题会略偏下，
   所以标题不用 padding 撑，而是给固定行高、让两行合计 = 1.28rem。 */
.kf-top__title {
    height: 0.56rem;
    line-height: 0.56rem;
    padding-top: 0.2rem;
    font-size: 0.40rem;
    font-weight: 700;
    color: #ffffff;
}

.kf-top__sub {
    height: 0.36rem;
    line-height: 0.36rem;
    font-size: 0.26rem;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------------------------------------------------------
 * 消息区
 * ------------------------------------------------------- */
.kf-scroll {
    position: fixed;
    left: 0;
    top: 1.28rem;                /* = 顶栏高度，改顶栏记得同步改这里 */
    right: 0;
    /* 底部留给输入栏（1.5rem）；引用条展开时由 JS 加 .has-quote 再让 0.9rem */
    bottom: 1.66rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.3rem 0.3rem 0.2rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.kf-scroll.has-quote {
    bottom: 2.56rem;
}

.kf-more {
    text-align: center;
    padding: 0.1rem 0 0.24rem;
}

.kf-more a {
    font-size: 0.30rem;
    color: #8a7b6d;
}

/* 单条消息 */
.kf-msg {
    overflow: hidden;
    margin-bottom: 0.34rem;
}

.kf-msg__body {
    max-width: 74%;
    float: left;
}

.kf-msg.is-me .kf-msg__body {
    float: right;
}

/* 气泡 */
.kf-bub {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 0.22rem 0.28rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: left;
    font-size: 0.36rem;
    line-height: 0.52rem;
    color: #2b2723;
    word-break: break-all;
    background-color: #ffffff;
    -webkit-border-radius: 0.16rem;
    border-radius: 0.16rem;
}

.kf-msg.is-me .kf-bub {
    /* 自己的消息用微信那种绿，与客服的白气泡一眼能分开 */
    background-color: #95ec69;
}

/* 撤回后的占位：不显示原文，只留一行灰字 */
.kf-msg.is-revoked .kf-msg__body {
    float: none;
    max-width: 100%;
    text-align: center;
}

.kf-revoked {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 0.08rem 0.24rem;
    font-size: 0.28rem;
    color: #9a9a9a;
    background-color: rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 0.16rem;
    border-radius: 0.16rem;
}

/* 引用预览（气泡内顶部） */
.kf-bub__quote {
    margin: -0.04rem 0 0.14rem;
    padding: 0.12rem 0.16rem;
    font-size: 0.30rem;
    line-height: 0.44rem;
    color: #6b6259;
    background-color: rgba(0, 0, 0, 0.06);
    -webkit-border-radius: 0.1rem;
    border-radius: 0.1rem;
    word-break: break-all;
}

/* 媒体消息：气泡去掉内边距与背景，图片自己就是内容 */
.kf-bub.is-media {
    padding: 0;
    background-color: transparent;
    font-size: 0;
    line-height: 0;
}

.kf-bub__img,
.kf-bub__video {
    display: block;
    max-width: 4.2rem;
    max-height: 5.2rem;
    -webkit-border-radius: 0.16rem;
    border-radius: 0.16rem;
    background-color: #d8d2ca;
}

/* 视频缩略：叠一个播放三角 */
.kf-vwrap {
    position: relative;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.kf-vwrap__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.9rem;
    height: 0.9rem;
    margin: -0.45rem 0 0 -0.45rem;
    background-color: rgba(0, 0, 0, 0.45);
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.kf-vwrap__play:after {
    content: "";
    position: absolute;
    left: 0.34rem;
    top: 0.26rem;
    width: 0;
    height: 0;
    border-left: 0.26rem solid #ffffff;
    border-top: 0.19rem solid transparent;
    border-bottom: 0.19rem solid transparent;
}

/* 气泡下面那行：时间 + 已读回执 */
.kf-meta {
    clear: both;
    padding-top: 0.10rem;
    font-size: 0.26rem;
    color: #a09488;
    text-align: left;
}

.kf-msg.is-me .kf-meta {
    text-align: right;
}

.kf-meta__read {
    color: #7aa64f;
}

/* 日期分隔 */
.kf-date {
    clear: both;
    margin: 0.1rem 0 0.3rem;
    text-align: center;
    font-size: 0.28rem;
    color: #9a8f84;
}

/* 正在输入 */
.kf-typing {
    padding: 0.06rem 0 0.2rem 0.06rem;
    font-size: 0.30rem;
    color: #8a7b6d;
}

.kf-typing__dot {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0.1rem;
    height: 0.1rem;
    margin-right: 0.06rem;
    background-color: #b3a698;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

/* ---------------------------------------------------------
 * 引用条
 * ------------------------------------------------------- */
.kf-quote {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.66rem;
    z-index: 25;
    height: 0.9rem;
    padding: 0 0.9rem 0 0.3rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #e2ddd6;
    border-top: 0.0257rem solid #d3ccc3;
}

.kf-quote__txt {
    height: 0.9rem;
    line-height: 0.9rem;
    font-size: 0.30rem;
    color: #6b6259;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kf-quote__x {
    position: absolute;
    right: 0.2rem;
    top: 0;
    width: 0.7rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    font-size: 0.44rem;
    color: #8a7b6d;
}

/* ---------------------------------------------------------
 * 底部输入栏
 *
 * 用绝对定位排 4 个元素，不用 float + margin：
 *   浮动那套要靠 margin 给浮动元素让位，一旦字号/内边距有出入就会错位，
 *   textarea 换行时更会把整行顶乱。绝对定位下每个元素的位置写死，
 *   互不影响，旧内核里表现也一致。
 *
 * 横向分配（总宽 10.8rem，两侧各留 0.24）：
 *   图片 0.24~0.94 | 视频 0.94~1.64 | 输入框 1.72~9.14 | 发送 9.22~10.56
 * ------------------------------------------------------- */
.kf-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 1.66 = 上下留白 .22x2 + 控件 1.22（.42 行高 x2 + 内边距 .32，刚好两行不滚动） */
    z-index: 30;
    height: 1.66rem;
    background-color: #f4f1ec;
    border-top: 0.0257rem solid #ddd6cd;
}

.kf-bar__btn {
    position: absolute;
    top: 0.22rem;
    display: block;
    width: 0.7rem;
    height: 1.22rem;
    text-align: center;
    font-size: 0;
}

.kf-bar__btn--img { left: 0.24rem; }
.kf-bar__btn--vid { left: 0.94rem; }

.kf-bar__btn img {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.36rem;
}

.kf-bar__btn:active img {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

/* 输入框：左右两端用 left/right 钉死，不参与浮动，
   高度固定为一行半的容量，内容再多就内部滚动，不会把工具栏撑高。 */
.kf-bar__input {
    position: absolute;
    left: 1.72rem;
    right: 1.66rem;
    top: 0.22rem;
    height: 1.22rem;
    padding: 0.16rem 0.2rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0;
    outline: 0;
    resize: none;
    overflow-y: auto;
    font-size: 0.34rem;
    line-height: 0.42rem;
    font-family: inherit;
    color: #2b2723;
    background-color: #ffffff;
    -webkit-border-radius: 0.12rem;
    border-radius: 0.12rem;
    -webkit-appearance: none;
}

/* 发送按钮：需求明确要求底部输入栏带发送键，不靠回车发送 */
.kf-bar__send {
    position: absolute;
    right: 0.24rem;
    top: 0.22rem;
    display: block;
    width: 1.3rem;
    height: 1.22rem;
    line-height: 1.22rem;
    text-align: center;
    font-size: 0.34rem;
    color: #ffffff;
    background-color: #b80404;
    -webkit-border-radius: 0.12rem;
    border-radius: 0.12rem;
}

.kf-bar__send:active {
    background-color: #9d130f;
}

/* 没内容时置灰：点了没反应会让人以为坏了 */
.kf-bar__send.is-off {
    background-color: #cfc7bd;
}

/* ---------------------------------------------------------
 * 全屏查看
 * ------------------------------------------------------- */
.kf-viewer {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.94);
    text-align: center;
}

.kf-viewer.is-show {
    display: block;
}

.kf-viewer__img,
.kf-viewer__video {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    max-height: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.kf-viewer__img.is-show,
.kf-viewer__video.is-show {
    display: block;
}

.kf-viewer__close {
    position: absolute;
    right: 0.3rem;
    top: 0.3rem;
    z-index: 2;
    width: 0.9rem;
    height: 0.9rem;
    line-height: 0.86rem;
    text-align: center;
    font-size: 0.6rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.16);
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

/* 打开查看器时锁住背景滚动 */
.kf-lock,
.kf-lock body {
    height: 100%;
    overflow: hidden;
}