@charset "utf-8";
/* ==========================================================================
   PbootCMS 右下角悬浮留言组件  v1.0
   样式表：skin/css/floatmsg.css        脚本：skin/js/floatmsg.js
   --------------------------------------------------------------------------
   换主题色：只改下面 --fm-accent / --fm-accent-2 两行
   ========================================================================== */
#floatmsg-root{
    --fm-accent:#EF6D00;
    --fm-accent-2:#d35f00;
    --fm-ink:#333333;
    --fm-text:#444444;
    --fm-muted:#9b9b9b;
    --fm-line:#e6e6e6;
    --fm-bg:#ffffff;
    --fm-radius:8px;
    position:fixed;
    right:var(--fm-right,24px);      /* 可用 data-right 覆盖 */
    bottom:var(--fm-bottom,24px);    /* 可用 data-bottom 覆盖 */
    z-index:999999;
    font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
    color:var(--fm-text);
    font-weight:400;
    text-align:left;
    -webkit-font-smoothing:antialiased;
}
#floatmsg-root *,
#floatmsg-root *:before,
#floatmsg-root *:after{ box-sizing:border-box; margin:0; padding:0; }
#floatmsg-root img{ border:0; max-width:100%; }
#floatmsg-root a{ text-decoration:none; color:inherit; }

/* ---------- 折叠按钮 ---------- */
#floatmsg-root .floatmsg-toggle{
    position:relative;
    display:flex;
    align-items:center;
    height:50px;
    padding:0 22px 0 17px;
    border:0;
    border-radius:25px;
    background:linear-gradient(135deg,var(--fm-accent) 0%,var(--fm-accent-2) 100%);
    color:#fff;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    letter-spacing:.5px;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.22);
    transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
    white-space:nowrap;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
}
#floatmsg-root .floatmsg-toggle:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
}
#floatmsg-root .floatmsg-toggle:active{ transform:translateY(0); }
#floatmsg-root .floatmsg-toggle svg{
    width:24px;
    height:24px;
    margin-right:8px;
    flex:0 0 auto;
    display:block;
}
#floatmsg-root.is-open .floatmsg-toggle{
    opacity:0;
    transform:translateY(8px) scale(.96);
    pointer-events:none;
}

/* ---------- 弹出面板 ---------- */
#floatmsg-root .floatmsg-panel{
    position:absolute;
    right:0;
    bottom:0;
    width:340px;
    max-width:calc(100vw - 32px);
    background:var(--fm-bg);
    border-radius:var(--fm-radius);
    box-shadow:0 16px 48px rgba(0,0,0,.22);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px) scale(.97);
    transform-origin:100% 100%;
    pointer-events:none;
    transition:opacity .26s ease, transform .26s ease, visibility .26s;
}
#floatmsg-root.is-open .floatmsg-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

/* 头部 */
#floatmsg-root .floatmsg-hd{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 18px;
    background:var(--fm-ink);
    color:#fff;
}
#floatmsg-root .floatmsg-hd-title{
    font-size:15px;
    font-weight:600;
    letter-spacing:.5px;
    display:flex;
    align-items:center;
}
#floatmsg-root .floatmsg-hd-title i{
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:8px;
    border-radius:50%;
    background:var(--fm-accent);
}
#floatmsg-root .floatmsg-close{
    width:24px;
    height:24px;
    line-height:22px;
    text-align:center;
    font-size:20px;
    color:rgba(255,255,255,.72);
    cursor:pointer;
    border-radius:50%;
    transition:background .2s ease, color .2s ease;
    user-select:none;
}
#floatmsg-root .floatmsg-close:hover{ background:rgba(255,255,255,.14); color:#fff; }

/* 表单主体 */
#floatmsg-root .floatmsg-body{ padding:16px 18px 18px; }
#floatmsg-root .floatmsg-item{ margin-bottom:11px; }
#floatmsg-root .floatmsg-item label{
    display:block;
    margin-bottom:5px;
    font-size:13px;
    color:var(--fm-muted);
    line-height:1.4;
}
#floatmsg-root .floatmsg-item label em{
    color:#e03b3b;
    font-style:normal;
    margin-left:2px;
}
#floatmsg-root .floatmsg-item input[type="text"],
#floatmsg-root .floatmsg-item textarea{
    display:block;
    width:100%;
    padding:0 11px;
    border:1px solid var(--fm-line);
    border-radius:4px;
    background:#fbfbfb;
    color:var(--fm-text);
    font-size:14px;
    font-family:inherit;
    line-height:36px;
    height:38px;
    outline:none;
    box-shadow:none;
    transition:border-color .2s ease, background .2s ease;
    -webkit-appearance:none;
    appearance:none;
    resize:none;
}
#floatmsg-root .floatmsg-item textarea{
    height:auto;
    line-height:1.6;
    padding:9px 11px;
    min-height:74px;
    overflow:auto;
}
#floatmsg-root .floatmsg-item input[type="text"]:focus,
#floatmsg-root .floatmsg-item textarea:focus{
    border-color:var(--fm-accent);
    background:#fff;
}
#floatmsg-root .floatmsg-item input::-webkit-input-placeholder,
#floatmsg-root .floatmsg-item textarea::-webkit-input-placeholder{ color:#bbb; }
#floatmsg-root .floatmsg-item input::-moz-placeholder,
#floatmsg-root .floatmsg-item textarea::-moz-placeholder{ color:#bbb; }
#floatmsg-root .floatmsg-item input:-ms-input-placeholder,
#floatmsg-root .floatmsg-item textarea:-ms-input-placeholder{ color:#bbb; }

/* 验证码 */
#floatmsg-root .floatmsg-code{ display:none; }
#floatmsg-root .floatmsg-code.show{ display:block; }
#floatmsg-root .floatmsg-code-inner{ display:flex; align-items:center; }
#floatmsg-root .floatmsg-code-inner input[type="text"]{ flex:1 1 auto; }
#floatmsg-root .floatmsg-code-inner img{
    flex:0 0 auto;
    width:92px;
    height:38px;
    margin-left:8px;
    border:1px solid var(--fm-line);
    border-radius:4px;
    cursor:pointer;
}

/* 提示信息 */
#floatmsg-root .floatmsg-tip{
    display:none;
    margin:2px 0 10px;
    padding:7px 11px;
    border-radius:4px;
    font-size:13px;
    line-height:1.5;
}
#floatmsg-root .floatmsg-tip.show{ display:block; }
#floatmsg-root .floatmsg-tip.is-err{ background:#fdecec; color:#d93030; }
#floatmsg-root .floatmsg-tip.is-ok{ background:#eaf7ed; color:#1a9c46; }

/* 提交按钮 */
#floatmsg-root .floatmsg-submit{
    display:block;
    width:100%;
    height:44px;
    border:0;
    border-radius:4px;
    background:linear-gradient(135deg,var(--fm-accent) 0%,var(--fm-accent-2) 100%);
    color:#fff;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    letter-spacing:1px;
    cursor:pointer;
    outline:none;
    transition:opacity .2s ease, transform .2s ease;
    -webkit-appearance:none;
    appearance:none;
}
#floatmsg-root .floatmsg-submit:hover{ opacity:.9; }
#floatmsg-root .floatmsg-submit:active{ transform:scale(.99); }
#floatmsg-root .floatmsg-submit[disabled]{ opacity:.6; cursor:not-allowed; }
#floatmsg-root .floatmsg-note{
    margin-top:10px;
    font-size:12px;
    color:#b5b5b5;
    text-align:center;
    line-height:1.5;
}

/* 表单抖动（校验失败） */
@keyframes floatmsg-shake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-6px); }
    40%{ transform:translateX(5px); }
    60%{ transform:translateX(-4px); }
    80%{ transform:translateX(3px); }
}
#floatmsg-root .floatmsg-panel.shake{ animation:floatmsg-shake .42s ease; }

/* ---------- 移动端 ---------- */
@media screen and (max-width:768px){
    #floatmsg-root{ right:14px; bottom:14px; }
    #floatmsg-root .floatmsg-toggle{ height:46px; padding:0 18px 0 14px; font-size:14px; }
    #floatmsg-root .floatmsg-toggle svg{ width:22px; height:22px; }
    #floatmsg-root .floatmsg-panel{
        position:fixed;
        right:14px;
        bottom:14px;
        left:14px;
        width:auto;
        max-width:340px;
        margin-left:auto;
    }
    #floatmsg-root .floatmsg-body{ padding:14px; }
}