*,::before,::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{max-width:800px;margin:0 auto;background-image:url("../styla/bj.jpg");background-size:cover;background-attachment:fixed;background-position:center;background-repeat:no-repeat}
#uploadFile{position:absolute;opacity:0}
.gong{color:#2a08e1;width:13rem;border-radius:5px;padding:2px 14px;margin-left:2rem}
.mk-chat-box{font-family:"Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;font-size:16px;width:100%;padding:0;position:relative;overflow-y:scroll;overflow-x:hidden;height:calc(100% - 80px);border:1px solid rgba(236,239,241,0.3);border-bottom:0;background:rgba(255,255,255,0.15)}
.top{padding-left:10px;background:#eceff1;height:40px;line-height:40px;text-align:center}
.foot{line-height:50px;text-align:center;font-size:12px;color:#333;background:#fff}
.write{height:40px;width:100%;background:#fff}
.write input{font-size:16px;float:left;width:calc(100% - 60px);height: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;background:#007bff;display:inline-block;height:40px;line-height:40px;text-align:center}
.send.disabled{background:#ccc}
.mk-chat-box .msg{margin:4px 6px;position:relative;min-height:40px;border:0}
.mk-chat-box .right{text-align:right;margin-left:64px}
.mk-chat-box .left{text-align:left;margin-right:64px}
.mk-chat-box img.head{width:32px;height:32px;top:8px;position:absolute;border-radius:100%;border:1px solid #ccc;user-select:none}
.mk-chat-box .right img.head{right:0}
.mk-chat-box .left img.head{left:0}
.mk-chat-box .name{color:#7761e8;font-size:12px;display:block;line-height:18px}
.mk-chat-box .right .name{margin:0 48px 2px 0}
.mk-chat-box .left .name{margin:0 0 2px 48px}
.mk-chat-box .content{word-break:break-all;word-wrap:break-word;text-align:left;position:relative;display:inline-block;font-size:14px;padding:8px 12px;line-height:18px;border-radius:10px;min-width:15px;min-height:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mk-chat-box .right .content{background:rgba(240,134,157,0.7);border:1px solid rgba(245,6,185,0.4);margin:0 48px 0 0}
.mk-chat-box .left .content{background:rgba(214,170,255,0.7);border:1px solid rgba(245,47,157,0.4);margin:0 0 0 48px}
.mk-chat-box .content img{width:100%;height:auto}
.mk-chat-box .content a{color:#00aaff}
.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;border-left:12px solid rgba(240,134,157,0.7)}
.mk-chat-box .left .content:after{left:-12px;top:8px;border-right:12px solid rgba(214,170,255,0.7)}
.mk-chat-box .tips{margin:12px;text-align:center;font-size:12px}
.mk-chat-box .tips span{display:inline-block;padding:4px;background:#ccc;color:#fff;border-radius:6px}
.mk-chat-box .tips .tips-primary{background:#428bca}
.mk-chat-box .tips .tips-success{background:#5cb85c}
.mk-chat-box .tips .tips-info{background:#5bc0de}
.mk-chat-box .tips .tips-warning{background:#f0ad4e}
.mk-chat-box .tips .tips-danger{background:#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:0 0}
.mk-chat-box::-webkit-scrollbar-track-piece{background:0 0}
.mk-chat-box::-webkit-scrollbar-thumb:vertical{background: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:#8C8C8C}
.image-upload{display:flex;align-items:center;height:40px;width:100%;background:#fff;padding-left:10px;gap:6px;flex-shrink:0}
.image-upload #uploadFile{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.image-upload .img-select-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;font-size:14px;color:#555;text-decoration:none;background:#eceff1;border-radius:4px;white-space:nowrap;transition:background .2s;cursor:pointer;user-select:none}
.image-upload .img-select-btn:hover{background:#d5d9de}
.image-upload .img-select-btn:active{background:#c0c5cb}
.image-upload .img-name{flex:1;font-size:13px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:32px;line-height:32px;background:#f5f5f5;border-radius:4px;padding:0 4px 0 10px}
.image-upload .img-send-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;width:90px;font-size:14px;color:#fff;text-decoration:none;background:#007bff;cursor:pointer;user-select:none;transition:background .2s;flex-shrink:0}
.image-upload .img-send-btn:hover{background:#0069d9}
.image-upload .img-send-btn:active{background:#0056b3}
.image-upload .img-send-btn.disabled{background:#ccc;cursor:not-allowed}
.image-upload .img-send-btn.disabled:hover{background:#ccc}
.login{margin-top:10px}
.weather-card{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:14px;padding:16px 20px;color:#fff;text-align:left;font-size:13px;line-height:1.7;min-width:220px;box-shadow:0 6px 20px rgba(102,126,234,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.weather-card .city{font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:1px}
.weather-card .city::before{content:"📍";margin-right:4px}
.weather-card .row{display:flex;align-items:center;gap:6px;padding:2px 0}
.weather-card .row .label{opacity:.8;min-width:52px}
.weather-card .row .val{font-weight:600}
.weather-card .day{border-top:1px solid rgba(255,255,255,.2);margin-top:8px;padding-top:8px}
.weather-card .day .d{font-size:12px;opacity:.9;margin-bottom:4px}
.weather-card .day .d span{display:inline-block;margin-right:10px}