/*
 * Messages: rows and the composer, shared by Home chats (conversations) and Meet rooms
 * (specs/005 R5). Moved from conversation.css when Meet became their second page
 * (constitution Principle VII). Viewer-specific parts (own actions, mentions, blocked
 * people) are hidden here and switched on by meet/_viewer_style.
 */

/* ---- Message rows ---- */

.message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-standard);
}

.message:hover {
  background-color: var(--color-card-raised);
}

.message__content {
  flex: 1;
  min-width: 0;
}

.message__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.message__name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-foreground);
}

.message__time {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.message__body {
  font-size: var(--text-lg);
}

.message__body .attachment__image {
  max-height: 280px;
}

/* ---- Composer: one bordered box, toolbar on top, attach · editor · send ---- */

.message-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.message-composer__box {
  background-color: var(--color-deep-night);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-comfortable);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.message-composer__box:focus-within {
  border-color: var(--color-purple);
  box-shadow: var(--glow-purple);
}

.message-composer__toolbar {
  display: block;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background-color: color-mix(in srgb, var(--color-selection) 30%, transparent);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-comfortable) var(--radius-comfortable) 0 0;
}

/* Attaching is the paperclip on the left of the editor, not a toolbar button. */
.message-composer__toolbar .trix-button-group--file-tools {
  display: none;
}

.message-composer__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
}

.message-composer__field {
  flex: 1;
  min-width: 0;
}

.message-composer__editor {
  min-height: 36px;
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 7px var(--space-1);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-foreground);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
}

.message-composer__editor:focus-visible {
  border: 0;
  box-shadow: none;
}

.message-composer__icon-button,
.message-composer__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, filter 120ms ease;
}

.message-composer__icon-button {
  color: var(--color-comment);
  background: transparent;
  border-radius: var(--radius-standard);
}

.message-composer__icon-button:hover {
  color: var(--color-foreground);
  background-color: var(--color-selection);
}

.message-composer__send {
  color: var(--color-foreground);
  background-color: var(--color-purple);
  border-radius: var(--radius-circle);
}

.message-composer__send:hover {
  filter: brightness(1.12);
}

.message-composer__icon-button:focus-visible,
.message-composer__send:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}

.message-composer__hint {
  display: none;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-comment);
  text-align: right;
}

.message-composer__hint kbd {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 1px var(--space-1);
  color: var(--color-foreground);
  background-color: var(--color-selection);
  border-radius: var(--radius-subtle);
}

@media (min-width: 640px) {
  .message-composer__hint {
    display: block;
  }
}

/* ---- Meet message rows: gutter, continued rows, hover actions ---- */

.message__gutter {
  flex: 0 0 40px;
  display: flex;
  justify-content: center;
}

.message__gutter-time {
  visibility: hidden;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-comment);
}

.message--continued {
  padding-top: 0;
  padding-bottom: 2px;
}

.message--continued:hover .message__gutter-time {
  visibility: visible;
}

.message {
  position: relative;
}

.message__edited {
  font-size: var(--text-xs);
  color: var(--color-comment);
}

/* Hidden for everyone; meet/_viewer_style shows the viewer's own and, for managers, all. */
.message__actions {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: var(--space-2);
  display: none;
  gap: var(--space-1);
  padding: 2px;
  background-color: var(--color-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-card);
}

.message:hover .message__actions,
.message:focus-within .message__actions {
  display: flex;
}

.message__own-actions,
.message__manage-actions {
  display: none;
  gap: var(--space-1);
}

.message__actions .btn {
  width: auto;
  min-height: 0;
  padding: var(--space-1);
}

/* Phones: a tap leaves the message hovered, and a floating bar would cover its first
   line (a reply's quote, a name to open). The actions take their own row under it. */
@media (max-width: 639px) {
  .message {
    flex-wrap: wrap;
  }

  .message__actions {
    position: static;
    flex: 1 0 100%;
    justify-content: flex-end;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* Inline code in any message body (the composer's `inlineCode` attribute). */
.trix-content code,
trix-editor code {
  padding: 1px var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-pink);
  background-color: var(--color-deep-night);
  border-radius: var(--radius-subtle);
}

/* Trix's own code block button is replaced by the code dialog (Meet) and inline code. */
.message-composer__toolbar .trix-button--icon-code {
  display: none;
}

/* Inline code shows Trix's own code chevrons; the code block button beside it a box
   around them (a "rectangle code"). */
trix-toolbar .trix-button--icon-inline-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-code-block::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22m9%209.5-2.5%202.5L9%2014.5M15%209.5l2.5%202.5-2.5%202.5M13%208.5l-2%207%22%2F%3E%3C%2Fsvg%3E");
}

/* ---- Inline edit ---- */

.message-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.message-edit__editor {
  min-height: 60px;
  padding: var(--space-2);
  background-color: var(--color-deep-night);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
}

.message-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.message-edit__actions .btn {
  width: auto;
}

/* ---- Meet: reply, react, branch, mentions (specs/005 US5) ---- */

/* Shown by the viewer's style where they may use them (research R5). */
.message__reply,
.message__react,
.message__branch {
  display: none;
}

.message__react {
  margin: 0;
}

/* Home's chats and Meet's Direct messages: both people may react (US8). */
.message[data-sender-id] .message__react {
  display: inline-flex;
}

/* A Meet message that mentions the viewer: the viewer style points --message-highlight
   at the palette's yellow. */
.meet-messages .message {
  box-shadow: inset 3px 0 0 var(--message-highlight, transparent);
  background-color: color-mix(in srgb, var(--message-highlight, transparent) 8%, transparent);
}

.message:target {
  animation: message-arrive 1.6s ease-out;
}

@keyframes message-arrive {
  from { background-color: color-mix(in srgb, var(--color-purple) 25%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .message:target { animation: none; outline: 2px solid var(--color-purple); }
}

.mention {
  padding: 0 var(--space-1);
  font-weight: var(--weight-semibold);
  color: var(--color-purple);
  background-color: color-mix(in srgb, var(--color-purple) 18%, transparent);
  border-radius: var(--radius-subtle);
}

.mention--group { color: var(--color-foreground); }
.mention--purple { color: var(--color-purple); }
.mention--pink { color: var(--color-pink); background-color: color-mix(in srgb, var(--color-pink) 18%, transparent); }
.mention--green { color: var(--color-green); background-color: color-mix(in srgb, var(--color-green) 18%, transparent); }
.mention--cyan { color: var(--color-cyan); background-color: color-mix(in srgb, var(--color-cyan) 18%, transparent); }
.mention--orange { color: var(--color-orange); background-color: color-mix(in srgb, var(--color-orange) 18%, transparent); }
.mention--yellow { color: var(--color-yellow); background-color: color-mix(in srgb, var(--color-yellow) 18%, transparent); }
.mention--red { color: var(--color-red); background-color: color-mix(in srgb, var(--color-red) 18%, transparent); }

/* The quote of the message a reply answers. */
.message-quote {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  margin-bottom: 2px;
  font-size: var(--text-sm);
  color: var(--color-comment);
  text-decoration: none;
}

.message-quote:hover {
  color: var(--color-foreground);
  text-decoration: none;
}

.message-quote__author {
  flex: 0 0 auto;
  font-weight: var(--weight-semibold);
}

.message-quote__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-quote__text--gone {
  font-style: italic;
}

/* The composer's "Replying to …" strip. */
.message-composer__reply {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.message-composer__reply[hidden] {
  display: none;
}

.message-composer__reply-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-composer__reply .btn {
  width: auto;
}

/* "New messages" where the member had read up to. */
.meet-messages__new {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-red);
  text-transform: uppercase;
}

.meet-messages__new::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-red);
}

/* Under a thread message: its branch. */
.branch-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  margin-top: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-cyan);
  text-decoration: none;
  border-radius: var(--radius-subtle);
}

.branch-summary:hover {
  text-decoration: none;
  background-color: var(--color-card);
}

.branch-summary__name {
  flex: 0 0 auto;
  max-width: 60%;
  overflow: hidden;
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On narrow screens the meta gives way (ellipsis), never the branch's name. */
.branch-summary__meta {
  min-width: 0;
  overflow: hidden;
  color: var(--color-comment);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The "@" suggestions above a composer. */
.mention-picker {
  display: none;
}

.mention-picker[data-open] {
  display: block;
  max-height: 240px;
  overflow-y: auto;
  border-bottom: 1px solid var(--color-border-subtle);
}

.mention-picker__list {
  margin: 0;
  padding: var(--space-1);
  list-style: none;
}

.mention-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-subtle);
  cursor: pointer;
}

.mention-picker__item[aria-selected="true"],
.mention-picker__item:hover {
  background-color: var(--color-selection);
}

.mention-picker__name {
  flex: 1;
  font-weight: var(--weight-semibold);
}

.mention-picker__hint {
  font-size: var(--text-xs);
  color: var(--color-comment);
}

/* A mention flows with the text (attachments are blocks elsewhere), in messages and in
   the editor. */
.trix-content action-text-attachment:has(.mention),
trix-editor figure.attachment--content:has(.mention) {
  display: inline;
}

trix-editor figure.attachment--content:has(.mention) {
  margin: 0;
  padding: 0;
}

/* A blocked author's message, collapsed (shown by the viewer style). */
.message__blocked {
  display: none;
  flex: 1;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-comment);
}

.message__reveal {
  padding: 0;
  font: inherit;
  color: var(--color-cyan);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Names open the profile drawer. */
a.message__name {
  color: var(--color-foreground);
  text-decoration: none;
}

a.message__name:hover {
  text-decoration: underline;
}

.message__avatar-link {
  display: inline-flex;
  border-radius: var(--radius-circle);
}