/* Conversations tab */
.root { display: flex; flex-direction: column; gap: var(--space-3); }
.skeleton { height: 100px; border-radius: var(--radius-lg); }
.eventCard { display: flex; flex-direction: column; gap: var(--space-3); }
.eventHeader { display: flex; align-items: center; justify-content: space-between; }
.channelBadge { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-secondary); }
.timestamp { font-size: var(--text-xs); color: var(--color-text-tertiary); }
/* Thread */
.thread { display: flex; flex-direction: column; gap: var(--space-2); }
.bubble { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 80%; }
.inbound { align-self: flex-start; }
.outbound { align-self: flex-end; flex-direction: row-reverse; }
.bubbleText { background: var(--glass-bg); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-primary); }
.outbound .bubbleText { background: var(--color-violet); color: white; }
.status { font-size: 10px; color: var(--color-text-tertiary); }
.threadActions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
/* Reply */
.replyBox { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.replyInput { flex: 1; background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-primary); outline: none; }
/* Call */
.callRecord { display: flex; flex-direction: column; gap: var(--space-2); }
.callMeta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
.keyMoments { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kmLabel { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.kmChip { font-size: var(--text-xs); background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-full); padding: 2px var(--space-2); color: var(--color-text-secondary); }
.callActions { display: flex; gap: var(--space-2); }
