/* Team Chat – chat.css */
#team-chat-app *{box-sizing:border-box;margin:0;padding:0}

#team-chat-app{
  display:flex;
  width:100%;
  height:88vh;
  max-height:700px;
  border:1px solid #e2e2e0;
  border-radius:12px;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#fff;
}

/* ── Sidebar ── */
#tc-sidebar{
  width:210px;min-width:210px;
  border-right:1px solid #e2e2e0;
  background:#f7f7f5;
  display:flex;flex-direction:column;overflow:hidden;
}
.tc-sidebar-header{
  padding:14px 14px 10px;
  border-bottom:1px solid #e2e2e0;
}
.tc-workspace-name{font-size:14px;font-weight:600;color:#1a1a18}
.tc-workspace-sub{font-size:11px;color:#888;margin-top:2px}
.tc-section-label{
  padding:10px 12px 4px;
  font-size:10px;font-weight:600;color:#aaa;
  letter-spacing:.06em;text-transform:uppercase;
}
.tc-channel-list{flex:1;overflow-y:auto;padding:0 4px 8px}
.tc-channel-item{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:6px;
  cursor:pointer;font-size:13px;color:#666;
}
.tc-channel-item:hover{background:#fff}
.tc-channel-item.active{background:#fff;color:#1a1a18;font-weight:500}
.tc-hash{color:#bbb;font-size:14px}
.tc-unread{
  margin-left:auto;background:#378ADD;color:#fff;
  font-size:10px;font-weight:600;border-radius:10px;padding:1px 6px;
}
.tc-members-list{padding:0 4px 8px}
.tc-member-item{
  display:flex;align-items:center;gap:8px;
  padding:5px 10px;border-radius:6px;font-size:13px;color:#666;
}
.tc-avatar{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;flex-shrink:0;
}
.av-blue  {background:#B5D4F4;color:#0C447C}
.av-teal  {background:#9FE1CB;color:#085041}
.av-coral {background:#F5C4B3;color:#712B13}
.av-purple{background:#CECBF6;color:#3C3489}
.av-amber {background:#FAC775;color:#633806}
.av-green {background:#C0DD97;color:#27500A}
.tc-dot{width:7px;height:7px;border-radius:50%;margin-left:auto;flex-shrink:0}
.tc-online{background:#1D9E75}.tc-offline{background:#ddd}

/* ── Main ── */
#tc-main{flex:1;display:flex;flex-direction:column;min-width:0}
#tc-header{
  padding:12px 18px;border-bottom:1px solid #e2e2e0;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.tc-ch-title{font-size:15px;font-weight:600;color:#1a1a18}
.tc-ch-desc{font-size:12px;color:#888;margin-top:1px}
#tc-messages{
  flex:1;overflow-y:auto;padding:14px 18px;
  display:flex;flex-direction:column;gap:0;
}
.tc-msg-group{display:flex;gap:10px;margin-bottom:10px}
.tc-msg-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;flex-shrink:0;margin-top:2px;
}
.tc-msg-body{flex:1;min-width:0}
.tc-msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.tc-msg-name{font-size:13px;font-weight:600;color:#1a1a18}
.tc-msg-time{font-size:11px;color:#bbb}
.tc-msg-text{font-size:14px;line-height:1.55;color:#1a1a18;word-break:break-word}
.tc-reactions{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.tc-reaction{
  background:#f7f7f5;border:1px solid #e2e2e0;border-radius:12px;
  padding:2px 8px;font-size:12px;cursor:pointer;
  display:flex;align-items:center;gap:4px;color:#666;
}
.tc-reaction:hover,.tc-reaction.active{background:#E6F1FB;border-color:#85B7EB;color:#185FA5}
.tc-date-divider{
  display:flex;align-items:center;gap:12px;
  margin:12px 0;color:#bbb;font-size:11px;
}
.tc-date-divider::before,.tc-date-divider::after{
  content:'';flex:1;height:1px;background:#e2e2e0;
}

/* ── Input area ── */
#tc-input-area{
  padding:10px 18px 14px;
  border-top:1px solid #e2e2e0;flex-shrink:0;
}
.tc-user-selector{
  display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap;align-items:center;
}
.tc-selector-label{font-size:11px;color:#bbb}
.tc-user-chip{
  display:flex;align-items:center;gap:5px;
  padding:3px 10px 3px 5px;border-radius:20px;
  border:1px solid #e2e2e0;font-size:12px;cursor:pointer;
  color:#666;background:#f7f7f5;font-family:inherit;
}
.tc-user-chip.selected{background:#E6F1FB;border-color:#378ADD;color:#185FA5}
.tc-chip-dot{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;
}
.tc-input-row{display:flex;gap:8px;align-items:flex-end}
#tc-msg-input{
  flex:1;border:1px solid #e2e2e0;border-radius:8px;
  padding:9px 12px;font-size:14px;font-family:inherit;
  color:#1a1a18;background:#f7f7f5;resize:none;
  min-height:40px;max-height:100px;line-height:1.4;outline:none;
}
#tc-msg-input:focus{border-color:#aaa;background:#fff}
#tc-send-btn{
  background:#378ADD;color:#fff;border:none;border-radius:8px;
  padding:9px 18px;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;white-space:nowrap;
}
#tc-send-btn:hover{background:#185FA5}
#tc-send-btn:disabled{background:#aaa;cursor:not-allowed}
.tc-typing{font-size:11px;color:#bbb;margin-top:5px;min-height:15px}
.tc-error{font-size:12px;color:#c0392b;margin-top:5px}
.tc-loading{
  display:flex;align-items:center;justify-content:center;
  height:60px;color:#bbb;font-size:13px;
}