.club-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 520px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.club-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
}

.club-chat-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }

.club-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--glass-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.club-message { display: flex; flex-direction: column; max-width: 75%; }
.club-message.mine { align-self: flex-end; }
.club-message.theirs { align-self: flex-start; }

.club-message-bubble {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  box-shadow: var(--glass-shadow);
}

.club-message.mine .club-message-bubble {
  background: var(--brand-soft);
  border-color: rgba(59, 130, 246, 0.25);
}

.club-message-author { font-size: 12px; font-weight: 600; color: var(--brand); margin-bottom: 4px; }
.club-message.mine .club-message-author { color: var(--green); }
.club-message-body { font-size: 14px; line-height: 1.45; word-break: break-word; }
.club-message-time { font-size: 11px; color: var(--text3); margin-top: 6px; text-align: right; }
.club-message-attachment { margin-top: 8px; }
.club-image-preview { max-width: 240px; max-height: 200px; border-radius: var(--radius-sm); display: block; }

.club-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--glass-bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
}

.club-message-reactions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; padding-left: 4px; }

.club-reaction-pill {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 12px;
}

.club-react-buttons { display: none; gap: 2px; }
.club-message:hover .club-react-buttons { display: inline-flex; }

.club-react-btn, .club-emoji-insert {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 4px;
  border-radius: 4px;
}

.club-react-btn:hover, .club-emoji-insert:hover { background: var(--glass-bg-hover); }

.club-chat-compose {
  padding: 12px;
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--glass-border);
}

.club-emoji-bar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
.club-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.club-message-input { flex: 1; resize: none; min-height: 44px; }
.club-attach-btn { cursor: pointer; margin: 0; }
.club-attachment-name { font-size: 12px; color: var(--text2); margin-top: 6px; }

.club-chat-disabled {
  padding: 16px;
  text-align: center;
  color: var(--text2);
  background: var(--glass-bg);
}
