:root{
        --blue:#3478F6;
        --blue-dark:#2A63D0;
        --page:#F5F7FA;
        --card:#FFFFFF;
        --line:#E9EDF3;
        --text:#1F2329;
        --sub:#8A9099;
        --radius:10px;
        --radius-sm:6px;
    }
    *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
    html,body{height:100%;}
    body{
        font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
        background:var(--page);
        color:var(--text);
        display:flex;align-items:center;justify-content:center;
        height:100vh;height:100dvh;overflow:hidden;
    }

    .app{
        width:100%;max-width:760px;height:100%;
        background:var(--card);
        display:flex;flex-direction:column;
        overflow:hidden;
    }
    @media (min-width:820px){
        .app{height:88vh;box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);-moz-box-shadow: 0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);}
    }

    .topbar{
        flex:0 0 auto;display:flex;align-items:center;gap:11px;
        padding:10px 16px;
        background:linear-gradient(135deg,#3D8BFF,#3478F6);
        color:#fff;
    }
    .kf-logo{
        flex:0 0 40px;width:40px;height:40px;border-radius:3px;overflow:hidden;
        background:#fff;display:flex;align-items:center;justify-content:center;
        font-size:18px;font-weight:700;color:#3478F6;user-select:none;
    }
    .kf-logo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0;}
    .kf-text{min-width:0;flex:1 1 auto;}
    .kf-name{
        font-size:16px;font-weight:600;color:#fff;line-height:1.25;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .kf-sub{
        font-size:12px;color:rgba(255,255,255,.86);line-height:1.35;margin-top:3px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    @media (max-width:480px){
        .topbar{padding:9px 13px;gap:9px;}
        .kf-logo{flex:0 0 36px;width:36px;height:36px;border-radius:3px;font-size:16px;}
        .kf-name{font-size:15px;}
        .kf-sub{font-size:11px;}
    }

    #upload-progress{flex:0 0 auto;height:2px;background:var(--blue);width:0;transition:width .2s;}

    #msg-area{
        flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
        padding:18px 16px;background:#ffffff;
    }
    .row{margin-bottom:14px;clear:both;max-width:78%;}
    .row.me{float:right;text-align:right;}
    .row.kf{float:left;display:flex;align-items:flex-start;gap:9px;max-width:86%;}
    .meta{font-size:11px;color:var(--sub);margin-bottom:5px;}
    .bubble{
        display:inline-block;padding:10px 13px;
        border-radius:var(--radius);
        font-size:15px;line-height:1.5;word-break:break-word;text-align:left;
    }
    .row.kf .bubble{background-color: #eff3f6;font-size: 12px;}
    .row.me .bubble{background:var(--blue);color:#fff;font-size: 12px;}

    .kf-avatar{
        flex:0 0 38px;width:38px;height:38px;
        border-radius:50%;overflow:hidden;background:#EEF1F6;
        display:flex;align-items:center;justify-content:center;
        font-size:15px;font-weight:600;color:#8A9099;user-select:none;
    }
    .kf-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0;}
    .kf-body{min-width:0;flex:1 1 auto;}
    @media (max-width:480px){
        .kf-avatar{flex:0 0 30px;width:30px;height:30px;font-size:14px;}
        .row.kf{gap:7px;max-width:88%;}
    }

    .imgbox{
        position:relative;display:block;width:150px;height:112px;
        border-radius:var(--radius-sm);overflow:hidden;background:#EEF1F6;
        border:1px solid var(--line);cursor:pointer;
        transition:width .22s ease, height .22s ease;
    }
    .row.me .imgbox{border-color:transparent;background:#DCE7F8;}
    .imgbox img{
        display:block;width:100%;height:100%;object-fit:contain;
        opacity:0;transition:opacity .28s ease;
    }
    .imgbox img.show{opacity:1;}

    .imgbox.emoji{background:transparent;border-color:transparent;}
    .row.me .imgbox.emoji{background:transparent;}
    .imgph{
        position:absolute;left:0;top:0;right:0;bottom:0;
        display:flex;align-items:center;justify-content:center;
        color:#9AA3AF;font-size:12px;
    }
    .spinner{
        width:18px;height:18px;border-radius:50%;
        border:2px solid #D8DEE8;border-top-color:var(--blue);
        animation:spin .8s linear infinite;display:inline-block;
    }
    @keyframes spin{to{transform:rotate(360deg);}}

    .pdmask{
        position:absolute;left:0;top:0;right:0;bottom:0;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
        background:rgba(17,24,39,.45);color:#fff;font-size:12px;
        -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
    }
    .pdmask .spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff;}
    .pdmask .ptxt{letter-spacing:.5px;text-align:center;padding:0 8px;line-height:1.4;}
    .pdmask.fail{background:rgba(17,24,39,.62);cursor:pointer;}
    .pdmask.fail .ptxt{text-decoration:underline;}

    .imgbox.pending{cursor:default;}

    .inputbar{
        flex:0 0 auto;display:flex;flex-direction:column;
        background:var(--card);border-top:1px solid var(--line);
        padding-bottom:env(safe-area-inset-bottom,0px);
    }

    .input-tools{
        display:flex;align-items:center;gap:4px;
        padding:6px 10px 4px;
		background: var(--page);
    }
    .tool{
        width:34px;height:34px;flex:0 0 34px;padding:0;border:none;background:transparent;
        display:flex;align-items:center;justify-content:center;cursor:pointer;
        color:#55708C;border-radius:6px;transition:background .15s,color .15s;
    }
    .tool svg{width:21px;height:21px;display:block;}
    .tool:active{background:#EEF3F9;}
    .tool.on{color:var(--blue);background:#EAF1FE;}
    .tool:disabled{opacity:.4;}

    .attach-bar{
        display:none;gap:8px;padding:8px 10px 2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    }
    .attach-bar.show{display:flex;}
    .attach-item{
        position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:8px;overflow:hidden;
        background:#F2F4F8;border:1px solid var(--line);
    }
    .attach-item img{width:100%;height:100%;object-fit:cover;display:block;}
    .attach-item.emoji{background:#fff;}
    .attach-item.emoji img{object-fit:contain;padding:3px;}
    .attach-del{
        position:absolute;right:-5px;top:-5px;width:19px;height:19px;border-radius:50%;border:none;padding:0;
        background:#4B5563;color:#fff;font-size:13px;line-height:1;cursor:pointer;
        display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2);
    }
    .attach-del:active{background:#6B7280;}

    @media (hover:hover){
        .tool:hover{background:#EEF3F9;color:var(--blue);}
        .tool.on:hover{background:#E1ECFD;}
        .emoji-grid button:hover{background:#EEF3F9;}
        #send-btn:hover{background:var(--blue-dark);}
        #send-btn:disabled:hover{background:#B9CCEA;}
        .attach-del:hover{background:#374151;}
        .foot-tip:hover{color:var(--blue);text-decoration:underline;}
    }

    #msg-input{
        width:100%;box-sizing:border-box;height:74px;resize:none;
        border:none;outline:none;background:transparent;
        padding:2px 14px 6px;font-size:15px;line-height:1.5;color:var(--text);
        font-family:inherit;
    }
    #msg-input::placeholder{color:#AEB6C2;}

    .input-foot{
        display:flex;align-items:center;justify-content:space-between;gap:10px;
        padding:6px 14px 10px;
    }
    .foot-tip{
        font-size:11px;color:#AAB2BE;min-width:0;text-decoration:none;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    #send-btn{
        flex:0 0 auto;height:36px;padding:0 26px;border:none;border-radius:6px;
        background:var(--blue);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
        transition:background .15s;
    }
    #send-btn:active{background:var(--blue-dark);}
    #send-btn:disabled{background:#B9CCEA;cursor:default;}

    .emoji-panel{
        display:none;max-height:174px;overflow-y:auto;-webkit-overflow-scrolling:touch;
        border-bottom:1px solid var(--line);padding:10px 10px 6px;background:#FCFDFE;
    }
    .emoji-panel.show{display:block;}
    .emoji-grid{
        display:grid;grid-template-columns:repeat(15,1fr);gap:6px 4px;
    }
    .emoji-grid button{
        height:40px;padding:0;border:none;background:transparent;cursor:pointer;
        display:flex;align-items:center;justify-content:center;border-radius:6px;
    }
    .emoji-grid button:active{background:#EEF3F9;}
    .emoji-grid img{width:32px;height:32px;object-fit:contain;display:block;}

    .emoji-grid img{width:100%;max-width:32px;height:auto;}
    .emoji-empty{font-size:12px;color:var(--sub);padding:14px 4px;text-align:center;line-height:1.6;}

    .shot-tip{
        display:none;position:absolute;left:12px;bottom:100%;margin-bottom:8px;
        background:#fff;border:1px solid var(--line);border-radius:8px;
        padding:9px 12px;font-size:12px;line-height:1.7;color:var(--text);
        box-shadow:0 2px 10px rgba(17,24,39,.10);white-space:nowrap;z-index:30;
    }
    .shot-tip.show{display:block;}
    .shot-tip b{color:var(--blue);font-weight:600;}
    .inputbar{position:relative;}

    #imgZoomLayer{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(17,24,39,.9);z-index:9998;}
    #imgZoomBox{display:none;position:fixed;z-index:9999;left:50%;top:50%;transform:translate(-50%,-50%);}
    #imgZoomBox img{max-width:92vw;max-height:88vh;border-radius:var(--radius-sm);}

    #imgZoomBox{cursor:grab;touch-action:none;}
    #imgZoomBox.dragging{cursor:grabbing;}
    #imgZoomBox img{
        transform-origin:center center;will-change:transform;
        -webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
    }
    .zoom-hint{
        position:fixed;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));
        z-index:10000;text-align:center;
        color:rgba(255,255,255,.82);font-size:12px;letter-spacing:.4px;line-height:1.5;
        padding:0 16px;pointer-events:none;opacity:0;transition:opacity .35s;
    }
    .zoom-hint.show{opacity:1;}

    ::-webkit-scrollbar{width:6px;}
    ::-webkit-scrollbar-thumb{background:#D8DEE8;border-radius:3px;}
    ::-webkit-scrollbar-track{background:transparent;}

    .qq-entry{
        margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;
        height:26px;padding:0 11px;border-radius:13px;
        border:1px solid rgba(255,255,255,.55);
        color:#fff;font-size:12px;line-height:1;white-space:nowrap;cursor:pointer;
        background:rgba(255,255,255,.16);
        -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
        transition:background .15s;
    }
    .qq-entry:active{background:rgba(255,255,255,.30);}
    @media (hover:hover){ .qq-entry:hover{background:rgba(255,255,255,.30);} }
    .qq-mask{
        position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(17,24,39,.45);
        display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;
    }
    .qq-mask.show{display:flex;}
    .qq-box{
        width:100%;max-width:300px;background:#fff;border-radius:14px;
        padding:22px 20px 16px;text-align:center;
        box-shadow:0 12px 40px rgba(16,24,40,.22);
    }
    .qq-title{font-size:15px;font-weight:600;color:var(--text);}
    .qq-num{
        font-size:23px;font-weight:700;color:var(--blue);letter-spacing:1px;
        margin:14px 0 18px;-webkit-user-select:text;user-select:text;
    }
    .qq-btn{
        width:100%;height:42px;border:none;border-radius:9px;cursor:pointer;
        background:var(--blue);color:#fff;font-size:15px;font-weight:600;
        transition:background .15s;
    }
    .qq-btn:active{background:var(--blue-dark);}
    .qq-btn.ok{background:#16A34A;}
    .qq-close{display:inline-block;margin-top:12px;padding:6px 14px;font-size:13px;color:var(--sub);cursor:pointer;}