/* ── Chat List ── */
.chat-list{flex:1;overflow-y:auto;padding:var(--space-md)}
.chat-list__empty{padding:var(--space-3xl) var(--space-lg);text-align:center}
.chat-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--t-fast)}
.chat-item:hover{background:var(--color-bg-card)}
.chat-item+.chat-item{border-top:1px solid var(--color-border)}
.chat-item__avatar{width:44px;height:44px;border-radius:var(--radius-full);overflow:hidden;flex-shrink:0;position:relative}
.chat-item__avatar img{width:100%;height:100%;object-fit:cover}
.chat-item__avatar.online::after{content:'';position:absolute;bottom:1px;right:1px;width:10px;height:10px;background:var(--color-success);border:2px solid var(--color-bg-primary);border-radius:50%}
.chat-item__content{flex:1;min-width:0}
.chat-item__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2xs)}
.chat-item__name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item__time{font-size:var(--fs-xs);color:var(--color-text-muted);flex-shrink:0}
.chat-item__preview{font-size:var(--fs-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item__unread{width:18px;height:18px;border-radius:var(--radius-full);background:var(--color-accent);color:#fff;font-size:10px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── Chat View ── */
.chat-view { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.chat-view.hidden{display:none}
.chat-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);min-height:var(--header-height)}
.chat-header__back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-full);transition:background var(--t-fast)}
.chat-header__back:hover{background:rgba(255,255,255,0.05)}
.chat-header__back svg{width:18px;height:18px}
.chat-header__info{flex:1;min-width:0}
.chat-header__name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header__status{font-size:var(--fs-xs);color:var(--color-text-muted)}
.chat-header__actions{display:flex;gap:var(--space-xs)}
.chat-header__tip:hover{background:var(--color-gold);color:var(--color-text-inverse)}

.chat-header__report { font-size: 10px; color: var(--color-text-muted); cursor: pointer; text-decoration: underline; padding: 4px; }
.chat-header__report.btn-block { color: var(--color-danger); font-weight: bold; text-decoration: none; border: 1px solid var(--color-danger); border-radius: 4px; padding: 2px 6px; }

.chat-messages{flex:1;overflow-y:auto;padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}
.chat-messages__date{text-align:center;font-size:var(--fs-xs);color:var(--color-text-muted);padding:var(--space-sm) 0}
.message{max-width:80%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);font-size:var(--fs-sm);line-height:var(--lh-base);animation:msgIn var(--t-base) var(--ease-out)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.message--sent{align-self:flex-end;background:var(--color-accent);color:#fff;border-bottom-right-radius:var(--radius-xs)}
.message--received{align-self:flex-start;background:var(--color-bg-elevated);color:var(--color-text-primary);border-bottom-left-radius:var(--radius-xs)}
.message__time{font-size:10px;opacity:.6;margin-top:var(--space-2xs);text-align:right}
.message__media{border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--space-xs);max-width:240px}
.message__media img{width:100%;display:block}
.message--tip{align-self:center;background:var(--color-gold-soft);color:var(--color-gold);text-align:center;border-radius:var(--radius-md);padding:var(--space-sm) var(--space-lg);font-weight:var(--fw-semibold)}
.message--system{align-self:center;color:var(--color-text-muted);font-size:var(--fs-xs);text-align:center;padding:var(--space-xs)}
.message--moderated{background:var(--color-danger-soft);color:var(--color-danger);font-style:italic}

.chat-input{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-secondary);border-top:1px solid var(--color-border);min-height:60px}
.chat-input__attach{width:36px;height:36px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-fast);flex-shrink:0;color:var(--color-text-muted)}
.chat-input__attach:hover{background:rgba(255,255,255,0.05);color:var(--color-text-primary)}
.chat-input__attach.disabled{opacity:.3;pointer-events:none}
.chat-input__attach svg{width:20px;height:20px}
.chat-input__field{flex:1;padding:var(--space-sm) var(--space-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--fs-sm);color:var(--color-text-primary);min-height:36px;transition:border-color var(--t-fast)}
.chat-input__field:focus{border-color:var(--color-accent)}
.chat-input__send{width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t-fast);flex-shrink:0}
.chat-input__send:hover{background:var(--color-accent-hover);transform:scale(1.05)}
.chat-input__send svg{width:16px;height:16px;color:#fff}