*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#f5f7fb;color:#182033}
body{min-height:100vh;min-height:100dvh}
button,textarea{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;min-height:100dvh;padding:24px;display:flex;align-items:center;justify-content:center}
.chat-card{width:min(820px,100%);height:min(860px,calc(100dvh - 48px));min-height:560px;background:#fff;border:1px solid #e8ecf3;border-radius:22px;box-shadow:0 18px 55px rgba(31,42,68,.10);overflow:hidden;display:flex;flex-direction:column}
.chat-header{padding:20px 22px 17px;border-bottom:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.96)}
.header-copy h1{font-size:19px;line-height:1.3;margin:0 0 5px;font-weight:700;letter-spacing:.01em}
.header-copy p{font-size:12px;color:#8a93a5;margin:0}
.status-dot{width:10px;height:10px;border-radius:50%;background:#b9c0cc;box-shadow:0 0 0 5px rgba(185,192,204,.12);flex:0 0 auto}
.status-dot.online{background:#27b36a;box-shadow:0 0 0 5px rgba(39,179,106,.12)}
.status-dot.offline{background:#e05252;box-shadow:0 0 0 5px rgba(224,82,82,.12)}
.quick-actions{padding:12px 18px;display:flex;gap:10px;border-bottom:1px solid #f0f2f6;background:#fbfcfe;overflow-x:auto}
.quick-btn{border:1px solid #dfe5ee;background:#fff;color:#3b4659;border-radius:999px;padding:8px 14px;font-size:13px;white-space:nowrap;transition:.15s ease}
.quick-btn:hover{border-color:#b8c3d3;background:#f8fafc}
.quick-btn:disabled{opacity:.5;cursor:not-allowed}
.message-list{flex:1;overflow-y:auto;padding:22px 18px 16px;scroll-behavior:smooth;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.empty-state{height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#a0a8b7;padding:24px}
.empty-title{font-size:15px;color:#747f91;margin-bottom:7px;font-weight:600}.empty-desc{font-size:13px;line-height:1.6}
.msg-row{display:flex;margin:0 0 14px}.msg-row.user{justify-content:flex-end}.msg-row.bot{justify-content:flex-start}
.msg-wrap{max-width:min(78%,600px)}
.bubble{padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.user .bubble{background:#315efb;color:#fff;border-bottom-right-radius:5px;box-shadow:0 5px 14px rgba(49,94,251,.16)}
.bot .bubble{background:#f0f3f8;color:#20293a;border-bottom-left-radius:5px}
.quote{font-size:12px;line-height:1.55;color:#667085;background:#f7f9fc;border-left:3px solid #aab4c4;padding:8px 10px;border-radius:7px;margin-bottom:7px;white-space:pre-wrap;overflow-wrap:anywhere}
.result-image{display:block;max-width:min(100%,520px);max-height:520px;border-radius:14px;border:1px solid #e5e9f0;background:#f5f6f8;cursor:zoom-in;object-fit:contain}
.msg-time{font-size:10px;color:#a1a9b7;margin-top:5px;padding:0 4px}.user .msg-time{text-align:right}
.composer{padding:13px 14px calc(13px + env(safe-area-inset-bottom));border-top:1px solid #e9edf3;background:#fff;display:flex;align-items:flex-end;gap:10px}
.composer textarea{flex:1;resize:none;max-height:130px;min-height:44px;border:1px solid #dde3ec;border-radius:14px;padding:11px 13px;outline:none;line-height:1.5;color:#20293a;background:#f9fafc;transition:.15s ease}
.composer textarea:focus{border-color:#9eb1f8;background:#fff;box-shadow:0 0 0 3px rgba(49,94,251,.08)}
.send-btn{height:44px;border:0;border-radius:13px;padding:0 19px;background:#315efb;color:#fff;font-weight:600;box-shadow:0 5px 14px rgba(49,94,251,.18)}
.send-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.image-viewer{position:fixed;inset:0;z-index:1000;background:rgba(10,15,25,.88);display:flex;align-items:center;justify-content:center;padding:30px}
.image-viewer[hidden]{display:none}.image-viewer img{max-width:95vw;max-height:92vh;object-fit:contain;border-radius:10px}.viewer-close{position:absolute;right:18px;top:14px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1}
@media(max-width:640px){
  .app-shell{padding:0}.chat-card{width:100%;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none}
  .chat-header{padding:16px 16px 13px}.quick-actions{padding:10px 13px}.message-list{padding:16px 12px 10px}.msg-wrap{max-width:86%}
  .composer{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}.send-btn{padding:0 16px}
}