@birdycom/omniaui 0.11.0 → 0.11.2

package/dist/parts/media-message-thread.css

@@ -1,136 +1,136 @@
-/* File: packages/ui/src/parts/media-message-thread.css | Map: frame (grid: header / messages / composer) -> header (title, meta,
-   people, status, actions) -> wallpaper (masked doodles in a token color) -> scroll area (starts at the bottom)
-   -> composer footer -> sending overlay (aria-busy) -> reduced motion
-   Message thread: one conversation. The scroll area uses flex-direction: column-reverse, so it opens at the newest message
-   and stays there when messages are added, without a script. Based on the question chat of the Korrekt app. */
-
-.oc-message-thread {
-  --oc-message-thread-height: 32rem;
-  position: relative;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  grid-template-columns: minmax(0, 1fr);
-  block-size: var(--oc-message-thread-height);
-  min-inline-size: 0;
-  overflow: hidden;
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) + 4px);
-  background: color-mix(in oklch, var(--oc-muted) 40%, var(--oc-background));
-  color: var(--oc-foreground);
-}
-
-/* ---- Header ---- */
-.oc-message-thread__header {
-  grid-row: 1;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-inline-size: 0;
-  padding: 0.6rem 0.6rem 0.6rem 1rem;
-  border-block-end: 1px solid var(--oc-border);
-  background: var(--oc-card);
-}
-.oc-message-thread__heading { display: grid; flex: 1 1 auto; gap: 0.1rem; min-inline-size: 0; }
-/* Two classes, so global heading styles (text-wrap on h3) cannot make the title wrap */
-.oc-message-thread__heading > .oc-message-thread__title {
-  margin: 0;
-  overflow: hidden;
-  font-size: 0.95rem;
-  font-weight: 650;
-  line-height: 1.3;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.oc-message-thread__heading > .oc-message-thread__meta {
-  margin: 0;
-  overflow: hidden;
-  color: var(--oc-muted-foreground);
-  font-size: 0.75rem;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.oc-message-thread__meta strong { color: var(--oc-primary); font-weight: 600; }
-.oc-message-thread__people { flex: none; }
-.oc-message-thread__people .oc-avatar { inline-size: 1.75rem; block-size: 1.75rem; font-size: 0.62rem; border-color: var(--oc-card); }
-.oc-message-thread__actions { display: flex; flex: none; align-items: center; gap: 0.35rem; }
-.oc-message-thread__icon-btn {
-  display: grid;
-  place-items: center;
-  inline-size: 2rem;
-  block-size: 2rem;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--oc-muted-foreground);
-  cursor: pointer;
-}
-.oc-message-thread__icon-btn svg { inline-size: 1.1rem; block-size: 1.1rem; }
-.oc-message-thread__icon-btn:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
-.oc-message-thread__icon-btn:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-
-/* ---- Wallpaper: line doodles (chat bubble, note, sun, house, lamp…) as a mask, painted in a token color ---- */
-.oc-message-thread::before {
-  content: "";
-  grid-row: 2;
-  grid-column: 1;
-  pointer-events: none;
-  background: oklch(from var(--oc-muted-foreground) l c h / 0.11);
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 36h28a6 6 0 0 1 6 6v14a6 6 0 0 1-6 6H40l-10 8v-8h-2a6 6 0 0 1-6-6V42a6 6 0 0 1 6-6z'/%3E%3Cpath d='M118 42h22v28H118z'/%3E%3Cpath d='M122 50h14M122 56h10'/%3E%3Ccircle cx='188' cy='52' r='10'/%3E%3Cpath d='M188 42v4M188 58v4M178 52h4M194 52h4'/%3E%3Cpath d='M42 118l8-4 8 4v10l-8 4-8-4z'/%3E%3Ccircle cx='50' cy='123' r='2.5'/%3E%3Cpath d='M128 112h24v18H128zM132 118h16M132 124h10'/%3E%3Cpath d='M178 118c6 0 10 4 10 10s-4 10-10 10-10-4-10-10 4-10 10-10z'/%3E%3Cpath d='M178 124v8M174 128h8'/%3E%3Cpath d='M36 178h20l4 12H32z'/%3E%3Cpath d='M120 176c8 0 14 6 14 14H106c0-8 6-14 14-14z'/%3E%3Ccircle cx='120' cy='168' r='7'/%3E%3Cpath d='M176 172h24v20h-24z'/%3E%3Cpath d='M182 178h12M182 184h8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
-}
-.oc-message-thread--plain::before { display: none; }
-
-/* ---- Scroll area: column-reverse keeps the newest message in view ---- */
-.oc-message-thread__scroll {
-  grid-row: 2;
-  grid-column: 1;
-  display: flex;
-  flex-direction: column-reverse;
-  min-block-size: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
-  scrollbar-color: var(--oc-border-strong, var(--oc-border)) transparent;
-}
-.oc-message-thread__scroll:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-message-thread__scroll > .oc-message-list { padding: 1rem 0.85rem; }
-
-/* ---- Composer footer: optional attachment chips + the chat-composer ---- */
-.oc-message-thread__footer {
-  grid-row: 3;
-  display: grid;
-  gap: 0.5rem;
-  padding: 0.6rem 0.75rem 0.75rem;
-  border-block-start: 1px solid var(--oc-border);
-  background: var(--oc-card);
-  box-shadow: 0 -4px 16px oklch(from var(--color-black-60) l c h / 0.05);
-}
-.oc-message-thread__footer .oc-chat-composer { background: var(--oc-background); }
-.oc-message-thread__note { margin: 0; color: var(--oc-muted-foreground); font-size: 0.75rem; text-align: center; }
-
-/* ---- Sending overlay: set aria-busy="true" on the thread while a message or upload is on its way ---- */
-.oc-message-thread__busy {
-  position: absolute;
-  inset: 0;
-  z-index: 3;
-  display: none;
-  place-content: center;
-  justify-items: center;
-  gap: 0.4rem;
-  padding: 1.5rem;
-  background: color-mix(in oklch, var(--oc-background) 82%, transparent);
-  backdrop-filter: blur(2px);
-  text-align: center;
-}
-.oc-message-thread[aria-busy="true"] > .oc-message-thread__busy { display: grid; }
-.oc-message-thread__busy > .oc-spinner { margin-block-end: 0.35rem; color: var(--oc-primary); }
-.oc-message-thread__busy strong { font-size: 0.9rem; }
-.oc-message-thread__busy span { color: var(--oc-muted-foreground); font-size: 0.78rem; }
-
-@container (width < 26rem) {
-  .oc-message-thread__people { display: none; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-message-thread__busy { backdrop-filter: none; }
-}
+/* File: packages/ui/src/parts/media-message-thread.css | Map: frame (grid: header / messages / composer) -> header (title, meta,
+   people, status, actions) -> wallpaper (masked doodles in a token color) -> scroll area (starts at the bottom)
+   -> composer footer -> sending overlay (aria-busy) -> reduced motion
+   Message thread: one conversation. The scroll area uses flex-direction: column-reverse, so it opens at the newest message
+   and stays there when messages are added, without a script. Based on the question chat of the Korrekt app. */
+
+.oc-message-thread {
+  --oc-message-thread-height: 32rem;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr);
+  block-size: var(--oc-message-thread-height);
+  min-inline-size: 0;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: color-mix(in oklch, var(--oc-muted) 40%, var(--oc-background));
+  color: var(--oc-foreground);
+}
+
+/* ---- Header ---- */
+.oc-message-thread__header {
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-inline-size: 0;
+  padding: 0.6rem 0.6rem 0.6rem 1rem;
+  border-block-end: 1px solid var(--oc-border);
+  background: var(--oc-card);
+}
+.oc-message-thread__heading { display: grid; flex: 1 1 auto; gap: 0.1rem; min-inline-size: 0; }
+/* Two classes, so global heading styles (text-wrap on h3) cannot make the title wrap */
+.oc-message-thread__heading > .oc-message-thread__title {
+  margin: 0;
+  overflow: hidden;
+  font-size: 0.95rem;
+  font-weight: 650;
+  line-height: 1.3;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.oc-message-thread__heading > .oc-message-thread__meta {
+  margin: 0;
+  overflow: hidden;
+  color: var(--oc-muted-foreground);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.oc-message-thread__meta strong { color: var(--oc-primary); font-weight: 600; }
+.oc-message-thread__people { flex: none; }
+.oc-message-thread__people .oc-avatar { inline-size: 1.75rem; block-size: 1.75rem; font-size: 0.62rem; border-color: var(--oc-card); }
+.oc-message-thread__actions { display: flex; flex: none; align-items: center; gap: 0.35rem; }
+.oc-message-thread__icon-btn {
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  cursor: pointer;
+}
+.oc-message-thread__icon-btn svg { inline-size: 1.1rem; block-size: 1.1rem; }
+.oc-message-thread__icon-btn:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-message-thread__icon-btn:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* ---- Wallpaper: line doodles (chat bubble, note, sun, house, lamp…) as a mask, painted in a token color ---- */
+.oc-message-thread::before {
+  content: "";
+  grid-row: 2;
+  grid-column: 1;
+  pointer-events: none;
+  background: oklch(from var(--oc-muted-foreground) l c h / 0.11);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 36h28a6 6 0 0 1 6 6v14a6 6 0 0 1-6 6H40l-10 8v-8h-2a6 6 0 0 1-6-6V42a6 6 0 0 1 6-6z'/%3E%3Cpath d='M118 42h22v28H118z'/%3E%3Cpath d='M122 50h14M122 56h10'/%3E%3Ccircle cx='188' cy='52' r='10'/%3E%3Cpath d='M188 42v4M188 58v4M178 52h4M194 52h4'/%3E%3Cpath d='M42 118l8-4 8 4v10l-8 4-8-4z'/%3E%3Ccircle cx='50' cy='123' r='2.5'/%3E%3Cpath d='M128 112h24v18H128zM132 118h16M132 124h10'/%3E%3Cpath d='M178 118c6 0 10 4 10 10s-4 10-10 10-10-4-10-10 4-10 10-10z'/%3E%3Cpath d='M178 124v8M174 128h8'/%3E%3Cpath d='M36 178h20l4 12H32z'/%3E%3Cpath d='M120 176c8 0 14 6 14 14H106c0-8 6-14 14-14z'/%3E%3Ccircle cx='120' cy='168' r='7'/%3E%3Cpath d='M176 172h24v20h-24z'/%3E%3Cpath d='M182 178h12M182 184h8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
+}
+.oc-message-thread--plain::before { display: none; }
+
+/* ---- Scroll area: column-reverse keeps the newest message in view ---- */
+.oc-message-thread__scroll {
+  grid-row: 2;
+  grid-column: 1;
+  display: flex;
+  flex-direction: column-reverse;
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--oc-border-strong, var(--oc-border)) transparent;
+}
+.oc-message-thread__scroll:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-message-thread__scroll > .oc-message-list { padding: 1rem 0.85rem; }
+
+/* ---- Composer footer: optional attachment chips + the chat-composer ---- */
+.oc-message-thread__footer {
+  grid-row: 3;
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.6rem 0.75rem 0.75rem;
+  border-block-start: 1px solid var(--oc-border);
+  background: var(--oc-card);
+  box-shadow: 0 -4px 16px oklch(from var(--color-black-60) l c h / 0.05);
+}
+.oc-message-thread__footer .oc-chat-composer { background: var(--oc-background); }
+.oc-message-thread__note { margin: 0; color: var(--oc-muted-foreground); font-size: 0.75rem; text-align: center; }
+
+/* ---- Sending overlay: set aria-busy="true" on the thread while a message or upload is on its way ---- */
+.oc-message-thread__busy {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: none;
+  place-content: center;
+  justify-items: center;
+  gap: 0.4rem;
+  padding: 1.5rem;
+  background: color-mix(in oklch, var(--oc-background) 82%, transparent);
+  backdrop-filter: blur(2px);
+  text-align: center;
+}
+.oc-message-thread[aria-busy="true"] > .oc-message-thread__busy { display: grid; }
+.oc-message-thread__busy > .oc-spinner { margin-block-end: 0.35rem; color: var(--oc-primary); }
+.oc-message-thread__busy strong { font-size: 0.9rem; }
+.oc-message-thread__busy span { color: var(--oc-muted-foreground); font-size: 0.78rem; }
+
+@container (width < 26rem) {
+  .oc-message-thread__people { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-message-thread__busy { backdrop-filter: none; }
+}

package/dist/parts/media-message.css

@@ -1,160 +1,160 @@
-/* File: packages/ui/src/parts/media-message.css | Map: list -> row (in / out) -> avatar -> bubble (sender, quote, text, attachments, meta)
-   -> grouping (:has) -> hover actions -> date divider + system line -> reduced motion
-   Message: one chat bubble. Incoming on the left with the avatar, outgoing on the right in the primary tint.
-   Consecutive messages of one sender group by themselves: the avatar shows once (on the last one), the name once (on the
-   first one). Based on the question chat of the Korrekt app. */
-
-.oc-message-list {
-  --oc-message-in: var(--oc-card);
-  --oc-message-out: color-mix(in oklch, var(--oc-primary) 14%, var(--oc-card));
-  --oc-message-shadow: 0 1px 2px oklch(from var(--color-black-60) l c h / 0.08), 0 4px 12px oklch(from var(--color-black-60) l c h / 0.06);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin: 0;
-  padding: 0.75rem;
-}
-
-/* ---- Row: avatar | bubble | actions (mirrored for outgoing) ---- */
-.oc-message {
-  display: flex;
-  align-items: flex-end;
-  gap: 0.5rem;
-  min-inline-size: 0;
-  margin: 0;
-}
-.oc-message--out { flex-direction: row-reverse; }
-.oc-message__avatar { inline-size: 2rem; block-size: 2rem; font-size: 0.7rem; border: 1px solid var(--oc-border); }
-.oc-message--out .oc-message__avatar { background: color-mix(in oklch, var(--oc-primary) 18%, var(--oc-card)); color: var(--oc-primary); }
-
-/* ---- Bubble ---- */
-.oc-message__bubble {
-  display: grid;
-  gap: 0.25rem;
-  min-inline-size: 0;
-  max-inline-size: min(78%, 34rem);
-  padding: 0.5rem 0.8rem 0.4rem;
-  border: 1px solid var(--oc-border);
-  border-radius: 1rem 1rem 1rem 0.25rem;
-  background: var(--oc-message-in, var(--oc-card));
-  box-shadow: var(--oc-message-shadow, none);
-  color: var(--oc-foreground);
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.oc-message--out .oc-message__bubble {
-  border-color: color-mix(in oklch, var(--oc-primary) 22%, var(--oc-border));
-  border-radius: 1rem 1rem 0.25rem 1rem;
-  background: var(--oc-message-out, var(--oc-muted));
-}
-.oc-message__sender { margin: 0; color: var(--oc-primary); font-size: 0.72rem; font-weight: 650; }
-
-/* Message text: paragraphs, lists, bold/italic, links and inline code (the output of a small markdown renderer) */
-.oc-message__text { min-inline-size: 0; overflow-wrap: anywhere; }
-.oc-message__text > :is(p, ul, ol) { margin: 0; }
-.oc-message__text > * + * { margin-block-start: 0.35rem; }
-.oc-message__text :is(ul, ol) { padding-inline-start: 1.15rem; }
-.oc-message__text a { color: var(--oc-primary); text-decoration: underline; text-underline-offset: 2px; }
-.oc-message__text a:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; border-radius: 2px; }
-.oc-message__text code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--oc-surface-strong); font-size: 0.85em; }
-
-/* Reply quote: the message this one answers (a link back to it) */
-.oc-message__quote {
-  display: grid;
-  gap: 0.1rem;
-  padding: 0.35rem 0.6rem;
-  border-inline-start: 3px solid var(--oc-primary);
-  border-radius: 0.4rem;
-  background: var(--oc-surface-strong);
-  color: var(--oc-muted-foreground);
-  font-size: 0.8rem;
-  line-height: 1.4;
-  text-decoration: none;
-}
-.oc-message__quote > strong { color: var(--oc-foreground); font-size: 0.72rem; font-weight: 650; }
-.oc-message__quote > span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
-a.oc-message__quote:hover { background: color-mix(in oklch, var(--oc-primary) 10%, transparent); }
-a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-
-.oc-message__attachments { display: grid; gap: 0.35rem; margin-block-start: 0.15rem; }
-
-/* Time + read receipt, small and right aligned */
-.oc-message__meta {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.35rem;
-  margin: 0;
-  color: var(--oc-muted-foreground);
-  font-size: 0.68rem;
-  font-variant-numeric: tabular-nums;
-}
-.oc-message__status { display: inline-flex; align-items: center; gap: 0.2rem; }
-.oc-message__status--read { color: var(--oc-success); font-weight: 600; }
-.oc-message__status--failed { color: var(--oc-destructive); font-weight: 600; }
-.oc-message__status svg { inline-size: 0.85rem; block-size: 0.85rem; }
-
-/* ---- Grouping: a --continued message follows one of the same sender ---- */
-.oc-message--continued { margin-block-start: -0.5rem; }
-.oc-message--continued .oc-message__sender { display: none; }
-.oc-message:has(+ .oc-message--continued) .oc-message__avatar { visibility: hidden; }
-.oc-message:has(+ .oc-message--continued) .oc-message__bubble { border-end-start-radius: 1rem; }
-.oc-message--out:has(+ .oc-message--continued) .oc-message__bubble { border-end-start-radius: 1rem; border-end-end-radius: 1rem; }
-.oc-message--continued .oc-message__bubble { border-start-start-radius: 0.25rem; }
-.oc-message--out.oc-message--continued .oc-message__bubble { border-start-start-radius: 1rem; border-start-end-radius: 0.25rem; }
-
-/* ---- Actions: appear on hover and keyboard focus (always visible on touch screens) ---- */
-.oc-message__actions {
-  display: flex;
-  align-self: center;
-  gap: 0.15rem;
-  opacity: 0;
-  transition: opacity var(--oc-transition-normal);
-}
-.oc-message:hover .oc-message__actions,
-.oc-message:focus-within .oc-message__actions { opacity: 1; }
-@media (hover: none) { .oc-message__actions { opacity: 1; } }
-.oc-message__action {
-  display: grid;
-  place-items: center;
-  inline-size: 1.85rem;
-  block-size: 1.85rem;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--oc-muted-foreground);
-  cursor: pointer;
-}
-.oc-message__action svg { inline-size: 1rem; block-size: 1rem; }
-.oc-message__action:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
-.oc-message__action--destructive:hover { background: oklch(from var(--oc-destructive) l c h / 0.12); color: var(--oc-destructive); }
-.oc-message__action:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-
-/* ---- Date divider and system line ---- */
-.oc-message-divider {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 0.25rem 0;
-  color: var(--oc-muted-foreground);
-  font-size: 0.72rem;
-  font-weight: 600;
-}
-.oc-message-divider::before,
-.oc-message-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--oc-border); }
-.oc-message-divider > * {
-  padding: 0.15rem 0.6rem;
-  border: 1px solid var(--oc-border);
-  border-radius: 999px;
-  background: var(--oc-card);
-}
-.oc-message-divider--system { justify-content: center; font-weight: 500; }
-.oc-message-divider--system::before,
-.oc-message-divider--system::after { display: none; }
-.oc-message-divider--system > * { max-inline-size: 85%; border-style: dashed; background: var(--oc-background); text-align: center; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-message__actions { transition: none; }
-}
+/* File: packages/ui/src/parts/media-message.css | Map: list -> row (in / out) -> avatar -> bubble (sender, quote, text, attachments, meta)
+   -> grouping (:has) -> hover actions -> date divider + system line -> reduced motion
+   Message: one chat bubble. Incoming on the left with the avatar, outgoing on the right in the primary tint.
+   Consecutive messages of one sender group by themselves: the avatar shows once (on the last one), the name once (on the
+   first one). Based on the question chat of the Korrekt app. */
+
+.oc-message-list {
+  --oc-message-in: var(--oc-card);
+  --oc-message-out: color-mix(in oklch, var(--oc-primary) 14%, var(--oc-card));
+  --oc-message-shadow: 0 1px 2px oklch(from var(--color-black-60) l c h / 0.08), 0 4px 12px oklch(from var(--color-black-60) l c h / 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0.75rem;
+}
+
+/* ---- Row: avatar | bubble | actions (mirrored for outgoing) ---- */
+.oc-message {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  margin: 0;
+}
+.oc-message--out { flex-direction: row-reverse; }
+.oc-message__avatar { inline-size: 2rem; block-size: 2rem; font-size: 0.7rem; border: 1px solid var(--oc-border); }
+.oc-message--out .oc-message__avatar { background: color-mix(in oklch, var(--oc-primary) 18%, var(--oc-card)); color: var(--oc-primary); }
+
+/* ---- Bubble ---- */
+.oc-message__bubble {
+  display: grid;
+  gap: 0.25rem;
+  min-inline-size: 0;
+  max-inline-size: min(78%, 34rem);
+  padding: 0.5rem 0.8rem 0.4rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 1rem 1rem 1rem 0.25rem;
+  background: var(--oc-message-in, var(--oc-card));
+  box-shadow: var(--oc-message-shadow, none);
+  color: var(--oc-foreground);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.oc-message--out .oc-message__bubble {
+  border-color: color-mix(in oklch, var(--oc-primary) 22%, var(--oc-border));
+  border-radius: 1rem 1rem 0.25rem 1rem;
+  background: var(--oc-message-out, var(--oc-muted));
+}
+.oc-message__sender { margin: 0; color: var(--oc-primary); font-size: 0.72rem; font-weight: 650; }
+
+/* Message text: paragraphs, lists, bold/italic, links and inline code (the output of a small markdown renderer) */
+.oc-message__text { min-inline-size: 0; overflow-wrap: anywhere; }
+.oc-message__text > :is(p, ul, ol) { margin: 0; }
+.oc-message__text > * + * { margin-block-start: 0.35rem; }
+.oc-message__text :is(ul, ol) { padding-inline-start: 1.15rem; }
+.oc-message__text a { color: var(--oc-primary); text-decoration: underline; text-underline-offset: 2px; }
+.oc-message__text a:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; border-radius: 2px; }
+.oc-message__text code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--oc-surface-strong); font-size: 0.85em; }
+
+/* Reply quote: the message this one answers (a link back to it) */
+.oc-message__quote {
+  display: grid;
+  gap: 0.1rem;
+  padding: 0.35rem 0.6rem;
+  border-inline-start: 3px solid var(--oc-primary);
+  border-radius: 0.4rem;
+  background: var(--oc-surface-strong);
+  color: var(--oc-muted-foreground);
+  font-size: 0.8rem;
+  line-height: 1.4;
+  text-decoration: none;
+}
+.oc-message__quote > strong { color: var(--oc-foreground); font-size: 0.72rem; font-weight: 650; }
+.oc-message__quote > span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+a.oc-message__quote:hover { background: color-mix(in oklch, var(--oc-primary) 10%, transparent); }
+a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+.oc-message__attachments { display: grid; gap: 0.35rem; margin-block-start: 0.15rem; }
+
+/* Time + read receipt, small and right aligned */
+.oc-message__meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+}
+.oc-message__status { display: inline-flex; align-items: center; gap: 0.2rem; }
+.oc-message__status--read { color: var(--oc-success); font-weight: 600; }
+.oc-message__status--failed { color: var(--oc-destructive); font-weight: 600; }
+.oc-message__status svg { inline-size: 0.85rem; block-size: 0.85rem; }
+
+/* ---- Grouping: a --continued message follows one of the same sender ---- */
+.oc-message--continued { margin-block-start: -0.5rem; }
+.oc-message--continued .oc-message__sender { display: none; }
+.oc-message:has(+ .oc-message--continued) .oc-message__avatar { visibility: hidden; }
+.oc-message:has(+ .oc-message--continued) .oc-message__bubble { border-end-start-radius: 1rem; }
+.oc-message--out:has(+ .oc-message--continued) .oc-message__bubble { border-end-start-radius: 1rem; border-end-end-radius: 1rem; }
+.oc-message--continued .oc-message__bubble { border-start-start-radius: 0.25rem; }
+.oc-message--out.oc-message--continued .oc-message__bubble { border-start-start-radius: 1rem; border-start-end-radius: 0.25rem; }
+
+/* ---- Actions: appear on hover and keyboard focus (always visible on touch screens) ---- */
+.oc-message__actions {
+  display: flex;
+  align-self: center;
+  gap: 0.15rem;
+  opacity: 0;
+  transition: opacity var(--oc-transition-normal);
+}
+.oc-message:hover .oc-message__actions,
+.oc-message:focus-within .oc-message__actions { opacity: 1; }
+@media (hover: none) { .oc-message__actions { opacity: 1; } }
+.oc-message__action {
+  display: grid;
+  place-items: center;
+  inline-size: 1.85rem;
+  block-size: 1.85rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  cursor: pointer;
+}
+.oc-message__action svg { inline-size: 1rem; block-size: 1rem; }
+.oc-message__action:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-message__action--destructive:hover { background: oklch(from var(--oc-destructive) l c h / 0.12); color: var(--oc-destructive); }
+.oc-message__action:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* ---- Date divider and system line ---- */
+.oc-message-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0.25rem 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+.oc-message-divider::before,
+.oc-message-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--oc-border); }
+.oc-message-divider > * {
+  padding: 0.15rem 0.6rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  background: var(--oc-card);
+}
+.oc-message-divider--system { justify-content: center; font-weight: 500; }
+.oc-message-divider--system::before,
+.oc-message-divider--system::after { display: none; }
+.oc-message-divider--system > * { max-inline-size: 85%; border-style: dashed; background: var(--oc-background); text-align: center; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-message__actions { transition: none; }
+}