/* chat-entry — ONE message in a conversation, in the register people already read.
   Shared: the landing hero uses it, and any door that stages a thread should too,
   instead of hand-rolling a card. Nothing about it knows where it sits on a page —
   the page owns position, motion and depth; this owns what a message LOOKS like.

   It is styled as a chat client renders a message, not as a generic panel: a square
   avatar in a fixed gutter, the author and the timestamp on one baseline, the body
   under both, and the hover tint on the whole row. That is the shape every reader
   already parses without being taught, which is the entire reason to borrow it.

   Contract:
     <article class="chat-entry" data-who="ayven|mate|you">
       <img class="chat-entry-avatar"> or <span class="chat-entry-avatar chat-entry-avatar-initial">D</span>
       <p class="chat-entry-head"><b class="chat-entry-name">Dana</b><span class="chat-entry-time">9:04</span></p>
       <p class="chat-entry-body">…</p>
       <p class="chat-entry-receipt" data-state="verified|claimed">⊕ …</p>   (optional)
     </article>
   Colours are literal, not tokens: a staged conversation owns its palette and must
   not flip with the site theme (.claude/rules/landing-page.md). */

.chat-entry {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  padding: 10px 14px 12px;
  border-radius: 10px;
  background: #1a1d21;
  border: 1px solid #26292e;
  color: #d1d2d3;
  font-family: 'Marr Sans', -apple-system, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  line-height: 1.46;
}

/* the avatar gutter — square with a soft radius, the way every chat client draws it */
.chat-entry-avatar {
  grid-row: 1 / span 3;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  background: #2c2f34;
}

/* initial-only avatar, for a person with no photo */
.chat-entry-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: #d1d2d3;
}

.chat-entry-head {
  grid-column: 2;
  margin: 0 0 1px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.chat-entry-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff; /* white: slack */
  letter-spacing: -0.01em;
}

.chat-entry-time {
  font-size: 11.5px;
  color: #9a9ea6;
  white-space: nowrap;
}

/* the app tag a bot carries in Slack — it is how a reader knows this line is not a person */
.chat-entry-app {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d1d2d3;
  background: #3f434a;
  border-radius: 3px;
  padding: 1px 4px;
}

.chat-entry-body {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chat-entry-body b { color: #ffffff; font-weight: 600; } /* white: slack */

/* A MENTION IS ALWAYS BLUE. Every chat client on earth renders @someone as a coloured,
   tinted token, and a staged conversation that renders it as plain text reads as fake
   immediately — it is the single cheapest tell. Blue on both surfaces, tinted, never
   underlined. See .claude/rules/landing-page.md — this is a codebase rule, not a
   preference of this component. */
.chat-entry-mention {
  color: #1d9bd1;
  background: rgba(29, 155, 209, 0.1);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
}

.chat-entry[data-who='you'] .chat-entry-mention { color: #1264a3; background: rgba(18, 100, 163, 0.1); }

/* the receipt line: a result someone can check, in the register of a machine, and
   distinct from anything a person typed */
.chat-entry-receipt {
  grid-column: 2;
  margin: 6px 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #2eb67d;         /* Slack green — a thing that actually happened */
}

.chat-entry-receipt[data-state='claimed'] { color: #ecb22e; }   /* Slack yellow — still someone's word */

/* WHO IS SPEAKING. Only one register is the reader's own, and it is the loud one —
   the composition's whole argument is that they wrote one line and everything else
   arrived. */
.chat-entry[data-who='you'] {
  background: #f8f8f8; /* white: slack */
  border-color: #e3e3e3;
  color: #1d1c1d;
}

.chat-entry[data-who='you'] .chat-entry-name { color: #1d1c1d; }
.chat-entry[data-who='you'] .chat-entry-time { color: #616061; }
.chat-entry[data-who='you'] .chat-entry-body b { color: #1d1c1d; }
.chat-entry[data-who='you'] .chat-entry-avatar { background: #dddddd; }
.chat-entry[data-who='you'] .chat-entry-avatar-initial { color: #1d1c1d; }

.chat-entry[data-who='ayven'] { border-color: #3a2f52; }

/* the hover tint is on the whole row, as a chat client does it. Depth and motion are
   NOT here — a page that stacks these owns that. */
.chat-entry:hover { background: #222529; }
.chat-entry[data-who='you']:hover { background: #ffffff; } /* white: slack */

/* ── ATTACHMENTS ───────────────────────────────────────────────────────────────
   What the message DID, as an object rather than a sentence. A chat client unfurls
   a file, a ticket, a link; a staged conversation that only ever says "I checked the
   ticket" is asking to be believed, while one that shows the ticket and its state has
   already proved it. This is the same rule the doors follow — the artifact carries the
   argument, prose only captions it.

   NOT a tinted left-accent callout: that pattern is banned repo-wide
   (.claude/rules/landing-page.md). A bordered block, an icon, a name, a state. */
/* `hidden` MUST win. A class-level `display:grid` outranks the UA's `[hidden]{display:none}`,
   so the attachment was on screen from the moment the card was dealt and the unfurl this
   component documents had never once happened in a browser. Opacity rather than display:
   the box stays measured, so revealing it cannot move anything (2026-07-29). */
.chat-entry-attachment[hidden] { display: grid; opacity: 0; pointer-events: none; }

.chat-entry-attachment {
  grid-column: 2;
  transition: opacity 0.24s ease;
  margin-top: 8px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #3a3d42;
  border-radius: 8px;
  background: #16181c;
}

.chat-entry-attachment-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  background: #2c2f34;
  color: #d1d2d3;
}

/* a claimed external object carries its own product mark (Drive, Jira) —
   the icon slot holds the real logo, not a stand-in glyph */
.chat-entry-attachment-icon img {
  width: 15px;
  height: 15px;
  display: block;
  object-fit: contain;
}

.chat-entry-attachment-title {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #d1d2d3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-entry-attachment-meta {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 400;
  color: #9a9ea6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the state is the whole point of showing the object: created, checked, still a claim */
.chat-entry-attachment-state {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 999px;
  color: #2eb67d;
  background: rgba(46, 182, 125, 0.12);
}

.chat-entry-attachment[data-state='claimed'] .chat-entry-attachment-state { color: #ecb22e; background: rgba(236, 178, 46, 0.12); }
.chat-entry-attachment[data-state='open'] .chat-entry-attachment-state { color: #9a9ea6; background: rgba(154, 158, 166, 0.12); }

/* per-kind icon tint, so a document and a ticket are distinguishable at a glance */
.chat-entry-attachment[data-kind='doc'] .chat-entry-attachment-icon { background: #2b4a3c; color: #8fe3bd; }
.chat-entry-attachment[data-kind='ticket'] .chat-entry-attachment-icon { background: #2b3a55; color: #9dc2ff; }
.chat-entry-attachment[data-kind='check'] .chat-entry-attachment-icon { background: #4a3a2b; color: #f0c785; }

/* on the reader's own light surface the block inverts with everything else */
.chat-entry[data-who='you'] .chat-entry-attachment { background: #ffffff; border-color: #dddddd; } /* white: slack */
.chat-entry[data-who='you'] .chat-entry-attachment-title { color: #1d1c1d; }

/* THE INTEGRATIONS ROW AT THE FOOT OF HER MESSAGE (founder, 2026-08-18: "give
   each chat entry here a bottom row of integrations that we have, and if they
   are utilised, brighten them, while the rest sits in the dark"). Every
   connected service's mark, in a row under the board, in column 2 like the
   attachment; the ones the message's board reaches into carry `data-lit` and
   stand at full ink; the rest sit in the dark — greyed and faint, present so
   the reader sees the whole set she could have used and which she did. Marks
   only, no names (the mark IS the name — _name-set.scss); 13px, the meta size.
   Nothing here is a chip: no border, no pill, no hover state. */
.chat-entry-sources {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.chat-entry-source {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  opacity: 0.22;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.chat-entry-source[data-lit] {
  opacity: 1;
  filter: none;
}