{"version":3,"file":"chatMessage.module.mjs","names":[],"sources":["../../../../package/common/chatMessage/chatMessage.module.pcss"],"sourcesContent":[".chatMessage {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5em;\n  margin-top: 0.75em;\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  &-own {\n    flex-direction: row-reverse;\n  }\n\n  &-continued {\n    margin-top: 0.125em;\n  }\n\n  &-avatar {\n    flex: none;\n    display: flex;\n  }\n\n  &-body {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    min-width: 0;\n    max-width: min(80%, 40em);\n  }\n\n  &-author {\n    margin-bottom: 0.25em;\n    padding-inline: 0.75em;\n    color: var(--text-dark);\n    font-size: var(--text-small-font-size);\n    font-weight: 600;\n\n    /* Out of view but read out. Pinned to the message, or its containing block could be the page\n       and leave empty space to scroll through below it. */\n    &-hidden {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 1px;\n      height: 1px;\n      margin: 0;\n      padding: 0;\n      clip-path: inset(50%);\n      overflow: hidden;\n      white-space: nowrap;\n    }\n  }\n\n  /* Wraps rather than stacks: a short message keeps its meta on the same line, a long one pushes\n     it onto a line of its own at the end. */\n  &-bubble {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-end;\n    column-gap: 0.5em;\n    box-sizing: border-box;\n    max-width: 100%;\n    padding: 0.5em 0.75em;\n    border-radius: calc(var(--default-border-radius) * 1.5);\n    border-start-start-radius: 0.25em;\n    overflow-wrap: anywhere;\n\n    &-filled {\n      background: var(--tone-fill);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--tone-gradient);\n      color: var(--tone-contrast);\n    }\n\n    /* Text keeps the page colour, as on a Light Card: a paragraph in the tone would not read. */\n    &-light {\n      background: var(--tone-light);\n      color: var(--text-color);\n    }\n\n    &-plain {\n      padding: 0;\n      border-radius: 0;\n      color: var(--text-color);\n    }\n  }\n\n  &-content {\n    flex: 1 1 auto;\n    min-width: 0;\n\n    &-text {\n      white-space: pre-wrap;\n    }\n  }\n\n  &-meta {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25em;\n    margin-inline-start: auto;\n    color: color-mix(in srgb, currentcolor 70%, transparent);\n    font-size: 0.75em;\n    white-space: nowrap;\n  }\n\n  /* Read stands out by brightness as well as colour, which alone would not reach everyone, and on\n     a filled bubble in a blue theme reaches no one. */\n  &-status {\n    display: inline-flex;\n    opacity: 0.7;\n\n    &-read {\n      color: var(--info-color);\n      opacity: 1;\n    }\n  }\n\n  &-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.25em;\n    margin-top: 0.25em;\n  }\n\n  /* The text in the page's own colour: the default dark theme's red reaches 2.1:1 on its\n     background, too little to read. The text carries the meaning, the red icon the signal. */\n  &-failed {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375em;\n    padding-inline: 0.25em;\n    color: var(--text-color);\n    font-size: var(--text-small-font-size);\n\n    &-icon {\n      color: var(--error-color);\n    }\n  }\n}\n\n.chatMessage-own .chatMessage-body {\n  align-items: flex-end;\n}\n\n.chatMessage-own .chatMessage-bubble {\n  border-start-start-radius: calc(var(--default-border-radius) * 1.5);\n  border-start-end-radius: 0.25em;\n}\n\n/* The corner pointing at the author marks the first message of a run, so the rest round it off.\n   After the own rule, which it ties with. */\n.chatMessage-continued .chatMessage-bubble {\n  border-start-start-radius: calc(var(--default-border-radius) * 1.5);\n  border-start-end-radius: calc(var(--default-border-radius) * 1.5);\n}\n\n/* Keeps the column, so a run of messages stays aligned under the avatar of its first. */\n.chatMessage-continued .chatMessage-avatar {\n  visibility: hidden;\n}\n\n.chatMessage-plain .chatMessage-body {\n  flex: 1 1 auto;\n  align-items: stretch;\n  max-width: none;\n}\n\n.chatMessage-plain .chatMessage-author {\n  padding-inline: 0;\n}\n\n/* The info blue would sink into a filled bubble. */\n.chatMessage-bubble-filled .chatMessage-status-read {\n  color: var(--tone-contrast);\n}\n"],"mappings":""}