/* babel: chat bubbles. Bigger radius, a soft gradient and a thin edge, derived from the theme's bubble colours
   (so light and dark mode both work). The little tail triangle is replaced by one smaller corner. */
.bubble {
  border-radius: 1.15rem;
  padding: 0.7rem 0.85rem;
}

.left .bubble {
  background-image: linear-gradient(155deg,
    color-mix(in srgb, var(--clr-bubble-left-bg) 78%, white),
    var(--clr-bubble-left-bg) 55%,
    color-mix(in srgb, var(--clr-bubble-left-bg) 90%, black));
  border: 1px solid color-mix(in srgb, var(--clr-bubble-left-bg) 72%, black);
}
.left.flash .bubble {
  background-image: linear-gradient(155deg,
    color-mix(in srgb, var(--clr-bubble-left-bg-flash) 80%, white),
    var(--clr-bubble-left-bg-flash));
}

.right .bubble {
  background-image: linear-gradient(155deg,
    color-mix(in srgb, var(--clr-bubble-right-bg) 85%, white),
    var(--clr-bubble-right-bg) 55%,
    color-mix(in srgb, var(--clr-bubble-right-bg) 94%, black));
  border: 1px solid color-mix(in srgb, var(--clr-bubble-right-bg) 82%, black);
}
.right.flash .bubble {
  background-image: linear-gradient(155deg,
    color-mix(in srgb, var(--clr-bubble-right-bg-flash) 80%, white),
    var(--clr-bubble-right-bg-flash));
}

.left .bubble.tip {
  border-bottom-left-radius: 0.3rem;
}
.right .bubble.tip {
  border-bottom-right-radius: 0.3rem;
}
.left .bubble.tip::before,
.right .bubble.tip::before {
  display: none;
}

/* Date and "deleted" pills keep their flat look. */
.meta .bubble {
  background-image: none;
  border: none;
  border-radius: 0.75rem;
}

/* UI scale from the app (--babel-ui-scale, 1 in a browser): scales every rem-based size. */
html, body {
  font-size: calc(10pt * var(--babel-ui-scale, 1));
}
.bubble div.message-content {
  font-size: calc(var(--message-text-size) * var(--babel-ui-scale, 1));
}

/* Text and voice messages: the time and delivery marks sit at the bottom right, on the last line of the text when
   there is room (the text reserves that space), like WhatsApp, so bubbles are less tall. Images and files keep
   the stacked layout. */
.bubble { padding-top: 0.55rem; padding-bottom: 0.4rem; }
.content-meta.babel-inline-time { position: relative; }
.content-meta.babel-inline-time .timestamp {
  position: absolute;
  float: none;
  top: auto;
  right: 0.5rem;
  bottom: 0;
  line-height: 1.2;
}
/* A spacer after the text reserves the room for the time; if the last line is too full it wraps to a new line. */
.content-meta.babel-inline-time .message-content::after {
  content: '';
  display: inline-block;
  width: 6.6rem;
  height: 1px;
  clear: none;
  visibility: hidden;
}
/* When a small hint line follows the text ("translated from..."), the hint carries the reserved room instead. */
.content-meta.babel-inline-time .message-content:has(.babel-hint)::after { display: none; }
.content-meta.babel-inline-time .babel-hint { padding-right: 6.6rem; }

/* Sign-in like an SMS login: phone, then a six-digit code */
.babel-login { display: flex; flex-direction: column; gap: 1rem; }
.babel-login-lead { color: var(--babel-muted, #5d6676); line-height: 1.4; }
.babel-login-phone { display: flex; gap: .5rem; }
.babel-login-phone select { flex: 0 0 40%; min-width: 0; }
.babel-login-phone input { flex: 1; min-width: 0; }
.babel-login-code { text-align: center; font-size: 2.2rem; letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums; }
.babel-login-error { color: #c0392b; }
.babel-login-info, .babel-login-wait { color: var(--babel-muted, #5d6676); }
.babel-login-links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }