.page-chat :root{--chat-bg: var(--c-bg);--bubble-self: var(--gradient-btn);--bubble-other: var(--c-card);--bubble-system: var(--c-border);--input-bg: var(--c-card);--send-btn: var(--color-brand);--header-h: 56px;--input-h: 60px;--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0}.page-chat{font-family:var(--font-family);background:var(--chat-bg);height:100dvh;display:flex;flex-direction:column;overflow:hidden;-webkit-overflow-scrolling:touch}.page-chat .chat-header{height:var(--header-h);background:var(--c-card);display:flex;align-items:center;padding:0 16px;gap:12px;border-bottom:1px solid var(--c-border);flex-shrink:0;z-index:10}.page-chat .chat-header .back-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--c-text);font-size:22px;cursor:pointer;border-radius:50%;transition:background .15s}.page-chat .chat-header .back-btn:active{background:var(--c-border)}.page-chat .chat-header .mediator-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--color-brand),var(--c-purple));color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}.page-chat .chat-header .mediator-info{flex:1;min-width:0}.page-chat .chat-header .mediator-name{font-size:16px;font-weight:600;color:var(--c-text);line-height:1.2}.page-chat .chat-header .mediator-title{font-size:12px;color:var(--c-text-muted)}.page-chat .chat-header .case-tag{font-size:11px;padding:3px 10px;border-radius:12px;background:var(--color-status-bg-reviewing);color:var(--color-brand-light);white-space:nowrap}.page-chat .chat-messages{flex:1;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}.page-chat .chat-messages::-webkit-scrollbar{width:0}.page-chat .date-divider{text-align:center;margin:16px 0 8px;font-size:12px;color:var(--c-text-muted)}.page-chat .date-divider span{background:var(--chat-bg);padding:2px 12px;border-radius:10px}.page-chat .msg-row{display:flex;margin-bottom:4px;animation:msgIn .3s var(--ease-spring)}@keyframes msgIn{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.page-chat .msg-row.self{justify-content:flex-end}.page-chat .msg-row.other{justify-content:flex-start}.page-chat .msg-row.system{justify-content:center}.page-chat .msg-bubble{max-width:72%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.55;word-break:break-word;position:relative}.page-chat .msg-row.self .msg-bubble{background:var(--bubble-self);color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 8px #3b82f640}.page-chat .msg-row.other .msg-bubble{background:var(--bubble-other);color:var(--c-text);border-bottom-left-radius:4px;box-shadow:0 1px 3px #0000000f}.page-chat .msg-row.system .msg-bubble{background:var(--bubble-system);color:var(--c-text-sub);font-size:13px;padding:6px 14px;border-radius:12px;max-width:85%;text-align:center}.page-chat .msg-time{font-size:11px;color:var(--c-text-muted);margin-top:4px;padding:0 4px}.page-chat .msg-row.self .msg-time{text-align:right;color:#ffffffb3}.page-chat .msg-row.other .msg-time{text-align:left}.page-chat .msg-image{max-width:200px;border-radius:12px;cursor:pointer;display:block}.page-chat .msg-row.self .msg-image{border-bottom-right-radius:4px}.page-chat .msg-row.other .msg-image{border-bottom-left-radius:4px}.page-chat .msg-file{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--c-border);border:1px solid var(--c-border-strong);border-radius:12px;cursor:pointer;transition:background .15s,transform .1s}.page-chat .msg-file:active{transform:scale(.98)}.page-chat .msg-file .file-icon{width:38px;height:38px;border-radius:9px;background:var(--gradient-btn);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.page-chat .msg-file .file-ext{color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px}.page-chat .msg-file .file-info{min-width:0}.page-chat .msg-file .file-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-chat .msg-file .file-size{font-size:11px;opacity:.7}.page-chat .file-upload-progress{position:absolute;left:0;right:0;top:-2px;height:3px;background:#3b82f626;overflow:hidden;opacity:0;transition:opacity .2s}.page-chat .file-upload-progress>i{display:block;height:100%;width:0;background:var(--gradient-btn);transition:width .15s}.page-chat .load-more-trigger{text-align:center;padding:12px;font-size:13px;color:var(--c-text-muted);cursor:pointer}.page-chat .chat-input-area{background:var(--input-bg);padding:8px 12px calc(8px + var(--safe-bottom));display:flex;align-items:flex-end;gap:8px;border-top:1px solid var(--c-border);flex-shrink:0;position:relative}.page-chat .chat-input-area .attach-btn{width:38px;height:38px;border:none;background:var(--c-border);border-radius:50%;font-size:20px;color:var(--c-text-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}.page-chat .chat-input-area .attach-btn:active{background:var(--c-border-strong)}.page-chat .chat-input-area textarea{flex:1;border:1px solid var(--c-border);border-radius:20px;padding:9px 14px;font-size:15px;font-family:inherit;resize:none;outline:none;max-height:100px;min-height:38px;line-height:1.4;color:var(--c-text);transition:border-color .2s}.page-chat .chat-input-area textarea:focus{border-color:var(--color-brand)}.page-chat .chat-input-area .send-btn{width:38px;height:38px;border:none;background:var(--send-btn);border-radius:50%;font-size:18px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}.page-chat .chat-input-area .send-btn:active{transform:scale(.92)}.page-chat .chat-input-area .send-btn:disabled{opacity:.4;transform:none}.page-chat .empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--c-text-muted);padding:40px}.page-chat .empty-chat .empty-icon{width:80px;height:80px;background:var(--color-status-bg-reviewing);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:16px}.page-chat .empty-chat .empty-title{font-size:16px;font-weight:600;color:var(--c-text-sub)}.page-chat .empty-chat .empty-desc{font-size:13px;margin-top:6px;text-align:center}.page-chat .upload-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--c-card);border-radius:20px 20px 0 0;padding:20px 0 calc(20px + var(--safe-bottom));z-index:100;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 20px #0000001a}.page-chat .upload-sheet.show{transform:translateY(0)}.page-chat .upload-sheet .sheet-option{display:flex;align-items:center;gap:14px;padding:16px 24px;cursor:pointer;font-size:16px;color:var(--c-text);transition:background .15s}.page-chat .upload-sheet .sheet-option:active{background:var(--c-border)}.page-chat .upload-sheet .sheet-option .opt-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}.page-chat .upload-sheet .sheet-cancel{text-align:center;padding:14px;font-size:15px;color:var(--c-text-sub);border-top:1px solid var(--c-border);cursor:pointer;margin-top:8px}.page-chat .upload-overlay{position:fixed;inset:0;background:#0006;z-index:99;opacity:0;pointer-events:none;transition:opacity .3s}.page-chat .upload-overlay.show{opacity:1;pointer-events:auto}.page-chat .msg-status{display:inline-flex;align-items:center;gap:4px;font-size:12px;margin-left:4px;flex-shrink:0;align-self:flex-end;padding-bottom:2px}.page-chat .msg-status--sending{color:var(--c-text-muted)}.page-chat .msg-status-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--c-text-muted);border-top-color:var(--c-text-sub);border-radius:50%;animation:msgSpin .7s linear infinite}@keyframes msgSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.page-chat .msg-status--sent{color:var(--color-success)}.page-chat .msg-status--sent .msg-status-icon{font-weight:700;font-size:14px;line-height:1}.page-chat .msg-status--failed{display:flex;align-items:center;gap:6px;padding:6px 0 2px;color:var(--color-danger);cursor:pointer;font-size:12px;user-select:none;-webkit-tap-highlight-color:transparent}.page-chat .msg-status--failed .msg-status-icon{font-weight:700;font-size:14px;line-height:1}.page-chat .msg-status--failed .msg-status-text{opacity:.85}.page-chat .msg-status--failed:active{opacity:.7}.page-chat .ui-toast{position:fixed;top:80px;left:50%;transform:translate(-50%);background:#000000c7;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;z-index:200;animation:toastIn .3s ease;pointer-events:none}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}}.page-chat .scroll-bottom-btn{position:fixed;right:20px;bottom:calc(var(--input-h) + 16px + var(--safe-bottom));width:38px;height:38px;border-radius:50%;background:#3b82f6eb;border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #3b82f64d;z-index:50;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.page-chat .scroll-bottom-btn.show{opacity:1;transform:translateY(0);pointer-events:auto}.page-chat .scroll-bottom-btn:active{transform:scale(.9);transition:transform .1s}.page-chat .scroll-bottom-btn.has-new:after{content:attr(data-count);position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--color-danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}@media (prefers-color-scheme: dark){.msg-row.other .msg-bubble{box-shadow:0 1px 3px #0000004d}}.page-chat .chat-skeleton{display:flex;flex-direction:column;gap:16px;padding:16px 12px;width:100%;position:absolute;top:0;left:0;right:0}.page-chat .skeleton-msg{display:flex;align-items:flex-end;gap:8px}.page-chat .skeleton-msg.skeleton-self{justify-content:flex-end}.page-chat .skeleton-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(90deg,var(--c-border) 25%,var(--c-card) 50%,var(--c-border) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;flex-shrink:0}.page-chat .skeleton-bubble{height:36px;border-radius:16px;background:linear-gradient(90deg,var(--c-border) 25%,var(--c-card) 50%,var(--c-border) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite}.page-chat .skeleton-bubble-short{width:55%}.page-chat .skeleton-bubble-long{width:70%}.page-chat .skeleton-bubble-mid{width:45%}.page-chat .skeleton-self .skeleton-bubble{border-bottom-right-radius:4px;background:linear-gradient(90deg,#3b82f626 25%,#3b82f64d,#3b82f626 75%);background-size:200% 100%}@keyframes skeletonShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.page-chat .typing-indicator{display:flex;align-items:flex-end;gap:8px;padding:0 12px 12px;animation:msgIn .3s var(--ease-spring)}.page-chat .typing-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-brand),var(--c-purple));flex-shrink:0}.page-chat .typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 16px;background:var(--bubble-other);border-radius:16px 16px 16px 4px;box-shadow:0 1px 3px #0000000f}.page-chat .typing-dot{width:8px;height:8px;border-radius:50%;background:var(--c-text-muted);animation:typingBounce 1.4s ease-in-out infinite}.page-chat .typing-dot:nth-child(1){animation-delay:0s}.page-chat .typing-dot:nth-child(2){animation-delay:.2s}.page-chat .typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}.page-chat .chat-input-area.input-blocked-flash{animation:inputBlockedFlash .9s ease}@keyframes inputBlockedFlash{0%{box-shadow:0 0 #ef444499}15%{box-shadow:0 0 0 3px #ef444499}50%{box-shadow:0 0 0 3px #ef444466}to{box-shadow:0 0 #ef444400}}.page-chat .msg-row.self .msg-meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:2px}.page-chat .msg-delivery-status{display:inline-flex;align-items:center;font-size:14px;line-height:1;color:#ffffffa6;transition:color .3s}.page-chat .msg-delivery-status[data-status=delivered]{color:#ffffffbf}.page-chat .msg-delivery-status[data-status=read]{color:#67dbff}.page-chat .msg-delivery-status .check-icon{font-weight:700;letter-spacing:-2px}.page-chat .msg-delivery-status .check-icon-double{margin-left:-6px}