@charset "utf-8";

/* PROJECT DETAILS */
	.chat-bubbles {
		margin: var(--margin-gap) auto;
		}
	.chat-bubbles.w {
		max-width: 64rem;
		}
	.chat-bubbles-layout {
		--avatar: 4rem;
		--gap: 0.5rem;
		display: grid;
		grid-gap: 1rem;
		width: 100%;
		}
	.chat-bubbles-conversations {
		display: grid;
		position: relative;
		}
	.chat-bubbles-conversation {
		bottom: 0;
		position: absolute;
		z-index: 3;
		}
	.chat-bubbles-space {
		visibility: hidden;
		}
	.chat-bubbles-frame {
		align-items: flex-start;
		display: grid;
		grid-gap: var(--gap);
		}
	.chat-bubbles-conversation .chat-bubbles-frame {
		transition: all 200ms ease;
		opacity: 1;
		}
	.chat-bubbles-conversation .chat-bubbles-frame.chat-bubbles-wait {
		opacity: 0;
		}
	.chat-bubbles-person {
		overflow: hidden;
		}
	.chat-bubbles-us {
		grid-template-columns: 1fr var(--avatar);
		}
	.chat-bubbles-them {
		grid-template-columns: var(--avatar) 1fr;
		}
	.chat-bubbles-us > .chat-bubbles-person {
		border-radius: .01rem 1rem 1rem 1rem;
		}
	.chat-bubbles-them > .chat-bubbles-person {
		border-radius: 1rem 0.2rem 1rem 1rem;
		grid-row: 1;
		}
	.chat-bubbles-holder {
		display: flex;
		width: 100%;
		}
	.chat-bubbles-us .chat-bubbles-holder {
		justify-content: flex-end;
		}
	.chat-bubbles-info {
		font-size: var(--text-sub-2);
		line-height: 1.2em;
		max-width: calc(100% - var(--avatar) - var(--gap));
		padding: 1.1rem 2rem;
		width: 100%;
		}
	.chat-bubbles-us .chat-bubbles-info {
		background-color: var(--hue-light);
		border-radius: 1rem 0.2rem 1rem 1rem;
		color: var(--hue-light-text);
		}
	.chat-bubbles-them .chat-bubbles-info {
		background-color: var(--hue-medium);
		border-radius: 0.2rem 1rem 1rem 1rem;
		color: var(--hue-light-text);
		}
	.chat-bubbles-info strong {
		padding-right: 0.5em;
		}
	.chat-bubbles-buttons {
		margin-bottom: 0;
		}
	.chat-bubbles-buttons.d {
		display: none;
		}
	.chat-bubbles-buttons.s {
		display: flex;
		}
	@media (min-width: 60em) {
	}
	@media (min-width: 80em) {
	}