{"version":3,"file":"chat-message.css.cjs","names":[],"sources":["../../../src/content/chat-message/chat-message.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chat-message-bg, var(--color-contrast-100));\n    --_color: var(--chat-message-color, var(--color-contrast-900));\n    --_user-bg: var(--chat-message-user-bg, var(--color-primary));\n    --_user-color: var(--chat-message-user-color, var(--color-primary-content));\n    --_radius: var(--chat-message-radius, var(--rounded-lg));\n    --_max-width: var(--chat-message-max-width, 36rem);\n\n    display: block;\n  }\n\n  .row {\n    display: flex;\n    gap: var(--size-2-5);\n    align-items: flex-start;\n  }\n\n  :host([sender='user']) .row {\n    flex-direction: row-reverse;\n  }\n\n  .avatar {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .avatar[hidden] {\n    display: none;\n  }\n\n  .column {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-1);\n    align-items: flex-start;\n    min-width: 0;\n  }\n\n  :host([sender='user']) .column {\n    align-items: flex-end;\n  }\n\n  .name {\n    /* Match `.bubble`'s inline padding so the name lines up with the bubble's own text\n       instead of the bubble's outer box. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n  }\n\n  .name[hidden] {\n    display: none;\n  }\n\n  /* =====================\n       Bubble\n       ===================== */\n\n  .bubble {\n    box-sizing: border-box;\n    width: fit-content;\n    max-width: var(--_max-width);\n    padding: var(--size-2-5) var(--size-3-5);\n    color: var(--_color);\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  :host([sender='user']) .bubble {\n    color: var(--_user-color);\n    background: var(--_user-bg);\n  }\n\n  .content {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n  }\n\n  /*\n   * `white-space`/`overflow-wrap` live on the slot itself, not `.content` — both are\n   * inherited properties, and slotted nodes inherit from their point of use (the `<slot>`)\n   * per the CSS Scoping spec, so this still reaches the projected text. Scoping it here\n   * (instead of the parent `.content`) keeps `.content`'s own whitespace-only text nodes —\n   * the newline + indentation between `<slot>` and the cursor `<span>` in this template —\n   * under normal collapsing rules, so they don't render as extra blank lines. Putting\n   * `pre-wrap` on `.content` directly did exactly that: real bug, caught by measuring\n   * rendered box height in a real browser.\n   */\n  .content-slot {\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n\n  /* =====================\n       Streaming cursor\n       ===================== */\n\n  .cursor {\n    display: inline-block;\n    width: 0.5em;\n    height: 1em;\n    margin-inline-start: var(--size-0-5);\n    vertical-align: text-bottom;\n    background: currentcolor;\n    animation: var(--_motion-animation, chat-message-blink 1s step-end infinite);\n  }\n\n  .cursor[hidden] {\n    display: none;\n  }\n\n  @keyframes chat-message-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* =====================\n       Meta row (timestamp / status / error / retry)\n       ===================== */\n\n  .meta {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .meta[hidden] {\n    display: none;\n  }\n\n  .timestamp[hidden] {\n    display: none;\n  }\n\n  .status {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .status[hidden] {\n    display: none;\n  }\n\n  .status[data-status='sent'] {\n    color: var(--color-success);\n  }\n\n  .status[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .spinner {\n    display: inline-block;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--color-contrast-300);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, chat-message-spin var(--transition-loader) infinite);\n  }\n\n  @keyframes chat-message-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .error-text {\n    color: var(--color-error);\n  }\n\n  .error-text[hidden] {\n    display: none;\n  }\n\n  .retry {\n    padding: 0;\n    font: inherit;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .retry[hidden] {\n    display: none;\n  }\n\n  .retry:focus-visible {\n    outline: var(--border-2) solid var(--color-focus);\n    outline-offset: var(--border-2);\n  }\n\n  /* =====================\n       Actions\n       ===================== */\n\n  .actions {\n    display: flex;\n    gap: var(--size-1);\n\n    /* Match `.bubble`'s inline padding — see `.name` above. */\n    padding-inline: var(--size-3-5);\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n}\n"],"mappings":""}