nexus-shared 2.0.0 → 3.1.0

package/src/Styles/Nexus.Chat.css

@@ -0,0 +1,1443 @@
+@layer nexus.components {
+  /*
+   * The chat: the trigger icon, the conversation, and the composer.
+   *
+   * The trigger has three looks and one size. Quiet is a subtle outline; a conversation with messages takes the accent
+   * on its soft tint; unread takes the solid accent with the count in a badge over the corner. The badge is laid over
+   * the box, never beside it, so a column of these in a table does not move as the counts arrive.
+   *
+   * Everything is drawn from the theme tokens, so all seven themes in light and dark follow without a line of their own.
+   */
+
+  /* The trigger */
+
+  .nx-chat-btn {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--nx-control-md);
+    height: var(--nx-control-md);
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text-subtle);
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration) linear,
+      color var(--nx-duration) linear,
+      border-color var(--nx-duration) linear;
+  }
+
+  .nx-chat-btn--sm {
+    width: var(--nx-control-sm);
+    height: var(--nx-control-sm);
+  }
+
+  .nx-chat-btn .nx-icon {
+    width: 18px;
+    height: 18px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-btn--sm .nx-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .nx-chat-btn:hover:not(:disabled) {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-chat-btn:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  /* Has messages: the accent on its soft tint. */
+  .nx-chat-btn[data-chat="active"] {
+    border-color: color-mix(in oklab, var(--nx-primary) 28%, transparent);
+    background: var(--nx-primary-soft);
+    color: var(--nx-primary);
+  }
+
+  .nx-chat-btn[data-chat="active"]:hover:not(:disabled) {
+    border-color: var(--nx-primary);
+    background: color-mix(in oklab, var(--nx-primary) 22%, var(--nx-surface));
+    color: var(--nx-primary);
+  }
+
+  /* Unread: the strongest step, so one glance down a list finds it. */
+  .nx-chat-btn[data-chat="unread"] {
+    border-color: var(--nx-primary-solid);
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+  }
+
+  .nx-chat-btn[data-chat="unread"]:hover:not(:disabled) {
+    background: var(--nx-primary-hover);
+    color: var(--nx-primary-text);
+  }
+
+  /* The number of unread messages, over the corner of the box so the box keeps its size. */
+  .nx-chat-btn__badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    display: grid;
+    place-items: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border: 1px solid var(--nx-surface);
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+    font-size: 10px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  /* The panel */
+
+  .nx-chat-panel {
+    --nx-chat-height: min(60vh, 520px);
+    --nx-avatar-size: 28px;
+
+    container-type: inline-size;
+    display: flex;
+    flex-direction: column;
+    height: var(--nx-chat-height);
+    min-height: 240px;
+    overflow: hidden;
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+  }
+
+  /* A low bar, as a window has: the name at the start, the buttons flush in the corner. */
+  .nx-chat-panel__bar {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-height: 36px;
+    padding: 0 var(--nx-space-2) 0 var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+    background: var(--nx-surface-2);
+  }
+
+  .nx-chat-panel__heading {
+    display: flex;
+    flex: 1 1 auto;
+    gap: var(--nx-space-2);
+    align-items: baseline;
+    min-width: 0;
+  }
+
+  .nx-chat-panel__title {
+    overflow: hidden;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-panel__description {
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-panel__people {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+    height: 26px;
+    margin: 0;
+    padding: 0 6px;
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-muted);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  .nx-chat-panel__people:hover,
+  .nx-chat-panel__people.is-open {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-chat-panel__people:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-panel__people .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-panel__body {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .nx-chat-panel__footer {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-2);
+    justify-content: flex-end;
+    padding: var(--nx-space-2) var(--nx-space-3);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* The people, in a column beside the thread: a dividing line, not a panel inside a panel. */
+  .nx-chat-panel__aside {
+    display: flex;
+    flex: 0 0 220px;
+    flex-direction: column;
+    min-width: 0;
+    overflow-y: auto;
+    border-left: 1px solid var(--nx-border);
+  }
+
+  .nx-chat-aside__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nx-space-2) var(--nx-space-2) var(--nx-space-2) var(--nx-space-3);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+  }
+
+  .nx-chat-aside__bar button {
+    display: grid;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-subtle);
+    cursor: pointer;
+  }
+
+  .nx-chat-aside__bar button:hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-chat-aside__bar button:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-aside__bar .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-aside__empty {
+    margin: 0;
+    padding: 0 var(--nx-space-3) var(--nx-space-3);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-aside__add {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    margin-top: auto;
+    padding: var(--nx-space-3);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* The thread */
+
+  .nx-chat-thread {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nx-chat-thread__list {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-3);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  .nx-chat-thread__list:focus-visible {
+    outline: none;
+    box-shadow: inset var(--nx-focus-ring);
+  }
+
+  .nx-chat-thread__day {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-chat-thread__older {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Down to the newest, with how many arrived while the reader was elsewhere. */
+  .nx-chat-thread__jump {
+    position: absolute;
+    right: var(--nx-space-3);
+    bottom: var(--nx-space-3);
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    cursor: pointer;
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  .nx-chat-thread__jump:hover {
+    border-color: var(--nx-border-strong);
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-chat-thread__jump:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-thread__jump .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-thread__jump-count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    display: grid;
+    place-items: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border: 1px solid var(--nx-surface);
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  /* The lines that break a thread up */
+
+  .nx-chat-day,
+  .nx-chat-unread-line {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: center;
+    font-size: var(--nx-text-xs);
+    text-transform: none;
+  }
+
+  .nx-chat-day::before,
+  .nx-chat-day::after,
+  .nx-chat-unread-line::before,
+  .nx-chat-unread-line::after {
+    flex: 1 1 auto;
+    height: 1px;
+    background: var(--nx-border);
+    content: "";
+  }
+
+  .nx-chat-day > span {
+    color: var(--nx-text-muted);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .nx-chat-unread-line::before,
+  .nx-chat-unread-line::after {
+    background: color-mix(in oklab, var(--nx-primary) 45%, transparent);
+  }
+
+  .nx-chat-unread-line {
+    margin: var(--nx-space-1) 0;
+  }
+
+  .nx-chat-unread-line > span {
+    padding: 2px 8px;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-primary-soft);
+    color: var(--nx-primary);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  /* A run of messages by one author */
+
+  .nx-chat-run {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: flex-end;
+  }
+
+  .nx-chat-run--mine {
+    justify-content: flex-end;
+  }
+
+  .nx-chat-run--system {
+    flex-direction: column;
+    gap: var(--nx-space-1);
+  }
+
+  .nx-chat-run__avatar {
+    flex-shrink: 0;
+  }
+
+  .nx-chat-run__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    max-width: min(82%, 46ch);
+  }
+
+  .nx-chat-run--mine .nx-chat-run__messages {
+    align-items: flex-end;
+  }
+
+  /* One message */
+
+  .nx-chat-msg {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .nx-chat-msg__bubble {
+    position: relative;
+    min-width: 0;
+    padding: 6px var(--nx-space-3) 6px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    line-height: 1.45;
+  }
+
+  .nx-chat-msg--theirs .nx-chat-msg__bubble {
+    background: var(--nx-surface-2);
+  }
+
+  .nx-chat-msg--mine .nx-chat-msg__bubble {
+    border-color: color-mix(in oklab, var(--nx-primary) 24%, transparent);
+    background: var(--nx-primary-soft);
+  }
+
+  /* A run reads as one block: only its outer corners are fully round. */
+  .nx-chat-msg--theirs:not(.nx-chat-msg--first) .nx-chat-msg__bubble {
+    border-top-left-radius: var(--nx-radius-sm);
+  }
+
+  .nx-chat-msg--theirs:not(.nx-chat-msg--last) .nx-chat-msg__bubble {
+    border-bottom-left-radius: var(--nx-radius-sm);
+  }
+
+  .nx-chat-msg--mine:not(.nx-chat-msg--first) .nx-chat-msg__bubble {
+    border-top-right-radius: var(--nx-radius-sm);
+  }
+
+  .nx-chat-msg--mine:not(.nx-chat-msg--last) .nx-chat-msg__bubble {
+    border-bottom-right-radius: var(--nx-radius-sm);
+  }
+
+  .nx-chat-msg--failed .nx-chat-msg__bubble {
+    border-color: color-mix(in oklab, var(--nx-danger) 45%, transparent);
+    background: var(--nx-danger-soft);
+  }
+
+  .nx-chat-msg__author {
+    display: block;
+    color: var(--nx-primary);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+  }
+
+  /*
+   * A message is Markdown. Inside a bubble it keeps the bubble's rhythm rather than a document's: nothing above the
+   * first block or below the last, a tighter gap between blocks, headings that do not tower over a line of text, and
+   * code and tables that scroll inside the bubble instead of widening it.
+   */
+  .nx-chat-msg__body {
+    overflow-wrap: anywhere;
+  }
+
+  .nx-chat-msg__body > :first-child {
+    margin-top: 0;
+  }
+
+  .nx-chat-msg__body > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nx-chat-msg__body > * + * {
+    margin-top: var(--nx-space-2);
+  }
+
+  .nx-chat-msg__body :is(h1, h2, h3, h4, h5, h6) {
+    font-size: var(--nx-text-lg);
+  }
+
+  .nx-chat-msg__body :is(ul, ol) {
+    padding-left: var(--nx-space-5);
+  }
+
+  .nx-chat-msg__body :is(pre, table) {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .nx-chat-msg__meta {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-end;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-chat-msg__edited {
+    font-style: italic;
+  }
+
+  /* Sending, sent, delivered, read — one mark, one size, in the place the time sits. */
+  .nx-chat-mark {
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 14px;
+    height: 14px;
+    color: var(--nx-text-subtle);
+  }
+
+  .nx-chat-mark .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  /* Read: the accent, so a glance down your own messages finds what has landed. */
+  .nx-chat-mark--seen {
+    color: var(--nx-primary);
+  }
+
+  .nx-chat-mark--failed {
+    color: var(--nx-danger);
+  }
+
+  /*
+   * The actions of a message: over its top corner, and shown only on hover or keyboard focus. They are laid over the
+   * bubble rather than taking a place in it, so nothing in the thread moves as the pointer travels down it.
+   */
+  .nx-chat-msg__actions {
+    position: absolute;
+    top: -12px;
+    display: none;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-surface);
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  .nx-chat-msg--theirs .nx-chat-msg__actions {
+    right: var(--nx-space-2);
+  }
+
+  .nx-chat-msg--mine .nx-chat-msg__actions {
+    left: var(--nx-space-2);
+  }
+
+  .nx-chat-msg:hover .nx-chat-msg__actions,
+  .nx-chat-msg:focus-within .nx-chat-msg__actions {
+    display: flex;
+  }
+
+  .nx-chat-msg__action {
+    display: grid;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+  }
+
+  .nx-chat-msg__action:hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-chat-msg__action--danger:hover {
+    background: var(--nx-danger-soft);
+    color: var(--nx-danger);
+  }
+
+  .nx-chat-msg__action:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-msg__action .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  /* A message that did not arrive: it stays, with why and what can be done. */
+  .nx-chat-msg__failure {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    color: var(--nx-danger);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-chat-msg__failure .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-msg__failure button {
+    display: inline-flex;
+    gap: 3px;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--nx-danger);
+    font: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .nx-chat-msg__failure button:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /* A quoted message, in the bubble that answers it and in the composer */
+
+  .nx-chat-quote {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    width: 100%;
+    margin: 2px 0 4px;
+    padding: 2px 0 2px var(--nx-space-2);
+    border: 0;
+    border-left: 2px solid color-mix(in oklab, var(--nx-primary) 60%, transparent);
+    background: none;
+    color: var(--nx-text-muted);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nx-chat-quote--gone {
+    border-left-color: var(--nx-border-strong);
+    font-style: italic;
+    cursor: default;
+  }
+
+  .nx-chat-quote:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-quote__author {
+    color: var(--nx-primary);
+    font-weight: 600;
+  }
+
+  .nx-chat-quote__body {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* Files on a message */
+
+  .nx-chat-files {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 4px 0 2px;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-chat-file > a,
+  .nx-chat-file > span {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    max-width: 100%;
+    padding: 3px 6px;
+    border: 1px solid color-mix(in oklab, var(--nx-text) 18%, transparent);
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text);
+    font-size: var(--nx-text-sm);
+    text-decoration: none;
+  }
+
+  .nx-chat-file > a:hover {
+    border-color: var(--nx-primary);
+    background: color-mix(in oklab, var(--nx-primary) 10%, transparent);
+    color: var(--nx-primary);
+  }
+
+  .nx-chat-file > a:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-file .nx-icon {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    vertical-align: 0;
+  }
+
+  .nx-chat-file__name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-file__size {
+    flex-shrink: 0;
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A note the system wrote */
+
+  .nx-chat-note {
+    display: flex;
+    gap: 6px;
+    align-items: baseline;
+    align-self: center;
+    justify-content: center;
+    max-width: 90%;
+    padding: 2px 10px;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-surface-2);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    text-align: center;
+  }
+
+  /* The people */
+
+  .nx-chat-people {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0 var(--nx-space-2) var(--nx-space-2);
+    list-style: none;
+  }
+
+  .nx-chat-person {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: center;
+    padding: 4px var(--nx-space-2);
+    border-radius: var(--nx-radius-sm);
+  }
+
+  .nx-chat-person--inactive {
+    opacity: 0.6;
+  }
+
+  .nx-chat-person__text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nx-chat-person__name {
+    display: flex;
+    gap: 4px;
+    align-items: baseline;
+    overflow: hidden;
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-person__you {
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    font-weight: 400;
+  }
+
+  .nx-chat-person__role {
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* Empty, loading, and failed */
+
+  .nx-chat-empty {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nx-space-6) var(--nx-space-4);
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  .nx-chat-empty p {
+    margin: 0;
+  }
+
+  .nx-chat-empty__hint {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-empty .nx-icon {
+    width: 15px;
+    height: 15px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-loading {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    align-self: center;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-loading .nx-icon,
+  .nx-chat-failure .nx-icon {
+    width: 15px;
+    height: 15px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-failure {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    padding: var(--nx-space-2) var(--nx-space-3);
+    border: 1px solid color-mix(in oklab, var(--nx-danger) 35%, transparent);
+    border-radius: var(--nx-radius);
+    background: var(--nx-danger-soft);
+    color: var(--nx-danger);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-failure button {
+    display: inline-flex;
+    gap: 3px;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--nx-danger);
+    font: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .nx-chat-failure button:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /* The composer */
+
+  .nx-chat-composer {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-2) var(--nx-space-3);
+    border-top: 1px solid var(--nx-border);
+    background: var(--nx-surface);
+  }
+
+  .nx-chat-composer--readonly p {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: var(--nx-space-1) 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    text-align: center;
+  }
+
+  /* The editor is the whole writing area, so the row under it carries only the hint and the buttons. */
+  .nx-chat-composer__row {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: center;
+  }
+
+  .nx-chat-composer__hint {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-composer__attach,
+  .nx-chat-composer__send {
+    display: inline-grid;
+    flex-shrink: 0;
+    grid-auto-flow: column;
+    gap: 6px;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text-muted);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nx-chat-composer__attach:hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-chat-composer__send {
+    width: auto;
+    padding: 0 10px;
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+  }
+
+  .nx-chat-composer__send:hover:not(:disabled) {
+    background: var(--nx-primary-hover);
+  }
+
+  .nx-chat-composer__send:disabled {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text-subtle);
+    cursor: not-allowed;
+  }
+
+  .nx-chat-composer__attach:focus-visible,
+  .nx-chat-composer__send:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-composer__attach .nx-icon,
+  .nx-chat-composer__send .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-composer__reply {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: center;
+    padding: var(--nx-space-1) var(--nx-space-2);
+    border-left: 2px solid var(--nx-primary);
+    border-radius: 0 var(--nx-radius-sm) var(--nx-radius-sm) 0;
+    background: var(--nx-surface-2);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-composer__reply-text {
+    display: flex;
+    flex: 1 1 auto;
+    gap: 6px;
+    min-width: 0;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-chat-composer__reply-text > span:last-child {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-composer__reply-author {
+    flex-shrink: 0;
+    color: var(--nx-primary);
+    font-weight: 600;
+  }
+
+  .nx-chat-composer__reply button,
+  .nx-chat-composer__files button {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-subtle);
+    cursor: pointer;
+  }
+
+  .nx-chat-composer__reply button:hover,
+  .nx-chat-composer__files button:hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-chat-composer__reply button:focus-visible,
+  .nx-chat-composer__files button:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-composer__reply .nx-icon,
+  .nx-chat-composer__files .nx-icon {
+    width: 13px;
+    height: 13px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-composer__files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-chat-composer__files li {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    max-width: 100%;
+    padding: 2px 4px 2px 8px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-surface-2);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-chat-composer__file-name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-composer__file-size {
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+
+  /*
+   * The conversation list and the New chat form: the panel's other two views. They sit where the thread sits, with
+   * the same bar above them, so the panel never grows a second frame inside itself.
+   */
+
+  .nx-chat-list {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    padding: var(--nx-space-2);
+    overflow-y: auto;
+  }
+
+  .nx-chat-list__items {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-chat-list__item {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: center;
+    width: 100%;
+    padding: var(--nx-space-2);
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nx-chat-list__item:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-chat-list__item:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /* The one open now: the accent tint, so the list says where you are without a word for it. */
+  .nx-chat-list__item.is-current {
+    border-color: color-mix(in oklab, var(--nx-primary) 28%, transparent);
+    background: var(--nx-primary-soft);
+  }
+
+  .nx-chat-list__group {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--nx-avatar-size, 28px);
+    height: var(--nx-avatar-size, 28px);
+    border-radius: 50%;
+    background: var(--nx-surface-2);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-chat-list__group .nx-icon {
+    width: 15px;
+    height: 15px;
+    vertical-align: 0;
+  }
+
+  .nx-chat-list__text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .nx-chat-list__line {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: baseline;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  .nx-chat-list__name {
+    overflow: hidden;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-list__when {
+    flex-shrink: 0;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    white-space: nowrap;
+  }
+
+  .nx-chat-list__last {
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-list__badge {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+    font-size: 11px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
+  .nx-chat-list__new {
+    flex-shrink: 0;
+    padding-top: var(--nx-space-2);
+    margin-top: var(--nx-space-2);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* New chat */
+
+  .nx-chat-new {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    padding: var(--nx-space-3);
+    overflow-y: auto;
+  }
+
+  .nx-chat-new__fields {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+  }
+
+  .nx-chat-new__kind {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-new__kind .nx-icon {
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+    vertical-align: 0;
+  }
+
+  .nx-chat-new__actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-2);
+    justify-content: flex-end;
+    padding-top: var(--nx-space-3);
+  }
+
+  .nx-chat-new__note {
+    margin: var(--nx-space-1) 0 0;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    text-align: end;
+  }
+
+  /* The bar's switch between conversations */
+
+  .nx-chat-panel__switch {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    min-width: 0;
+    margin: 0;
+    padding: 2px 6px;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nx-chat-panel__switch:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-chat-panel__switch:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-panel__switch .nx-icon {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    vertical-align: 0;
+  }
+
+  .nx-chat-panel__of {
+    flex-shrink: 0;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    font-weight: 400;
+  }
+
+  .nx-chat-panel__back {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    margin-left: calc(var(--nx-space-2) * -1);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+  }
+
+  .nx-chat-panel__back:hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-chat-panel__back:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-chat-panel__back .nx-icon {
+    width: 15px;
+    height: 15px;
+    vertical-align: 0;
+  }
+
+  /*
+   * The people an `@` offers. It opens above the composer, because the composer is at the bottom of the panel and a
+   * list under it would fall outside. The highlighted row is the one Enter puts in.
+   */
+  .nx-chat-mentions {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    max-height: 200px;
+    margin: 0;
+    padding: var(--nx-space-1);
+    overflow-y: auto;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-surface);
+    list-style: none;
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  .nx-chat-mentions__item {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: center;
+    width: 100%;
+    padding: 4px var(--nx-space-2);
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nx-chat-mentions__item.is-at {
+    background: var(--nx-primary-soft);
+    color: var(--nx-primary);
+  }
+
+  .nx-chat-mentions__name {
+    overflow: hidden;
+    font-weight: 500;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-chat-mentions__role {
+    margin-left: auto;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    white-space: nowrap;
+  }
+
+  /*
+   * A narrow panel: the people cover the thread rather than squeezing it. Measured, not guessed — at 520px the column
+   * would leave the thread under 300px, which is narrower than the bubbles want.
+   */
+  @container (max-width: 520px) {
+    .nx-chat-panel__body {
+      position: relative;
+    }
+
+    .nx-chat-panel__aside {
+      position: absolute;
+      inset: 0;
+      flex-basis: auto;
+      background: var(--nx-surface);
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-chat-btn {
+    transition: none;
+  }
+}