body{color:#222;background:#f5f5f5;margin:0;font-family:system-ui,Microsoft YaHei,sans-serif}input{font-size:16px}.app{height:100dvh;display:flex}.chat-col{flex-direction:column;flex:1;min-width:0;display:flex}.chat-header{background:#fff;border-bottom:1px solid #ddd;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;display:flex}.chat-messages{flex:1;padding:16px;overflow-y:auto}.chat-form{background:#fff;gap:8px;padding:12px 16px;display:flex}.chat-form input{flex:1;min-width:0;padding:8px}.voice-col{background:#fff;border-left:1px solid #ddd;width:240px;padding:16px;overflow-y:auto}@media (width<=700px){.app{flex-direction:column}.voice-col{border-bottom:1px solid #ddd;border-left:none;order:-1;width:auto;max-height:28vh;padding:8px 12px}}.unread-divider{color:#e74c3c;align-items:center;gap:8px;margin:12px 0;font-size:12px;display:flex}.unread-divider:before,.unread-divider:after{content:"";background:#e74c3c;flex:1;height:1px}.read-receipt{color:#888;margin-top:2px;font-size:12px}.vbtn{color:#fff;cursor:pointer;background:#4e5058;border:none;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex}.vbtn:hover{background:#5d6069}.vbtn-off{color:#f23f43;background:#3b2325}.vbtn-off:hover{background:#4a2a2d}.vbtn-hangup{background:#da373c}.vbtn-hangup:hover{background:#a12828}.voice-row{border-radius:6px;align-items:center;gap:10px;padding:4px 6px;display:flex}.voice-row:hover{background:#f0f0f0}.voice-avatar{color:#fff;box-sizing:border-box;border:2px solid #0000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:flex}.voice-speaking{border-color:#2ecc71;box-shadow:0 0 0 1px #2ecc71}.voice-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.voice-status{color:#888;gap:4px;display:flex}