:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

@keyframes pop {
  0% { transform:scale(.96); opacity:0 }
  100%{ transform:scale(1); opacity:1 }
}
.animate-pop { animation: pop .18s ease-out }

.bubble {
  max-width: 80%;
  padding: .5rem .75rem;
  border-radius: 1rem;
}
.bubble.me {
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(16,185,129,.3);
  margin-left: auto;
}
.bubble.them {
  background: rgba(148,163,184,.15);
  border: 1px solid rgba(148,163,184,.3);
  margin-right: auto;
}
.meta {
  font-size: .7rem;
  opacity: .7;
  margin-top: .25rem;
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: .6rem;
  background: rgba(148,163,184,.15);
}