:root {
  --bubble-primary-color: rgb(233, 235, 238); // gray;
  --bubble-secondary-color: #79de79;

  --bubble-vertical-padding: 10px;
  --bubble-radius: 15px;

  --bubble-system-vertical-padding: 5px;
  --bubble-system-radius: 7px;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#bubble-container {
    scroll-behavior: smooth;
}

.bubble-group {
    margin-bottom: 10px;
}

.bubble-group.system {
    text-align: center;
    font-size: x-small;
    font-weight: bold;
}

.bubble-group.other {
    text-align: left;
}

.bubble-group.self {
    text-align: right;
}

.bubble span {
    display: inline-block;
}

.bubble.system span {
    padding: var(--bubble-system-vertical-padding) var(--bubble-system-radius);
    background: #b6cdfb;
    color: #5b606b; 
    border-radius: var(--bubble-system-radius);
}

.bubble.other span, .bubble.self span {
    padding: var(--bubble-vertical-padding) var(--bubble-radius);
}

.bubble.other span {
    background: var(--bubble-secondary-color);
    border-top-right-radius: var(--bubble-radius);
    border-bottom-right-radius: var(--bubble-radius);
}
.bubble.other:last-of-type span {
    border-bottom-left-radius: var(--bubble-radius);
} 
.bubble.self span {
    background: var(--bubble-primary-color);
    border-top-left-radius: var(--bubble-radius);
    border-bottom-left-radius: var(--bubble-radius);
}

.bubble.self:first-of-type span {
    border-top-right-radius: var(--bubble-radius);
}

.bubble-container {
    padding-left: 8px;
    padding-right: 8px;
}

.bubble-name {
    display: inline-block;
    background: var(--bubble-primary-color);
    border-width: 2px;
    border-top-right-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: x-small;
    font-weight: bold;
}

.bubble-name {
    animation: scaleIn 0.20s ease-in-out;
    transform-origin: 0 100% 0;
}

.bubble span {
    animation: scaleIn 0.20s ease-in-out;
}

.bubble.other span {
    transform-origin: 0 0 0;
}

.bubble.self span {
    transform-origin: 100% 100% 0;
}

div.chat-box {
    margin: auto;
    width: 50%;
    min-width: 350px;
}

div#bubble-container {
    height: 350px;
    overflow-x: auto;
}

nav * {
    vertical-align: middle;
    text-decoration: none;
    font-weight: 700;
}

nav a:hover {
    text-decoration: none;
}

nav .brand {
    white-space: nowrap;
}

nav .logo {
    height: 2em;
    margin-right: .3em;
}