/* Message bubbles and composer only. Additive. */

#czatix-app .czx-msg {
  align-self: flex-start;
  max-width: min(78%, 520px);
  margin: 10px 0 0;
  padding: 8px 12px 7px;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e4eaf2);
  border-radius: 16px 16px 16px 5px;
  color: var(--ink, #0e1525);
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#czatix-app .czx-msg:first-child {
  margin-top: 0;
}

#czatix-app .czx-msg:not(.mine) + .czx-msg:not(.mine) {
  margin-top: 3px;
  border-top-left-radius: 5px;
}

#czatix-app .czx-msg.mine + .czx-msg.mine {
  margin-top: 3px;
  border-top-right-radius: 5px;
}

#czatix-app .czx-msg:not(.mine):has(+ .czx-msg:not(.mine)) {
  border-bottom-left-radius: 5px;
}

#czatix-app .czx-msg.mine:has(+ .czx-msg.mine) {
  border-bottom-right-radius: 5px;
}

#czatix-app .czx-msg:not(.mine) + .czx-msg.mine,
#czatix-app .czx-msg.mine + .czx-msg:not(.mine) {
  margin-top: 14px;
}

#czatix-app .czx-msg.mine {
  align-self: flex-end;
  margin-left: auto;
  background: var(--soft, #eaf1ff);
  border-color: color-mix(in srgb, var(--blue, #1d4ed8) 22%, var(--line, #e4eaf2));
  border-radius: 16px 16px 5px 16px;
}

#czatix-app .czx-msg .who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 2px;
  color: var(--ink, #0e1525);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

#czatix-app .czx-msg.mine .who {
  justify-content: flex-end;
}

#czatix-app .czx-msg:not(.mine) + .czx-msg:not(.mine):not(:has(.who time)) .who,
#czatix-app .czx-msg.mine + .czx-msg.mine:not(:has(.who time)) .who {
  display: none;
}

#czatix-app .czx-msg .text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#czatix-app .czx-msg time {
  color: var(--muted, #5d6b82);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

#czatix-app .czx-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--paper, #fff);
  border-top: 1px solid var(--line, #e4eaf2);
  padding: 8px 12px calc(8px + var(--safe-b, 0px));
}

#czatix-app .czx-compose textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  margin: 0;
  padding: 10px 12px;
  resize: none;
  overflow-y: auto;
  field-sizing: content;
  border: 1px solid var(--line, #e4eaf2);
  border-radius: 12px;
  background: var(--paper, #fff);
  color: var(--ink, #0e1525);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
}

#czatix-app .czx-send {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--blue, #1d4ed8);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

#czatix-app .czx-send:hover {
  background: color-mix(in srgb, var(--blue, #1d4ed8) 86%, #000);
}

#czatix-app .czx-send:disabled {
  opacity: 0.55;
  cursor: default;
}

#czatix-app .czx-attach {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted, #5d6b82);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}

#czatix-app .czx-attach:hover {
  background: var(--bg, #f3f6fb);
  color: var(--ink, #0e1525);
}