/* The reactions that run a lap: the announcements of a running club in a dark chat on a black page. Every reaction
   has its colour; the line it runs is drawn in that colour. */
:root {
  --page: #000000;          /* the page */
  --card: #0e0e12;          /* the chat's box */
  --edge: #212128;          /* its edge */
  --rule: #1a1a20;          /* the lines under the head and over the foot */
  --bubble: #1d1d23;        /* the messages */
  --ink: #eeeef3;           /* the words */
  --name: #b9b9c5;          /* who wrote */
  --muted: #8f8f9c;         /* the times, the line under the name, the foot */
  --chip: #1d1d24;          /* a reaction under a message */
  --chip-edge: #2e2e37;     /* its edge */
  --chip-ink: #cdcdd6;      /* its number */
  --bar: #25252d;           /* the bar of reactions */
  --bar-edge: #36363f;      /* its edge */
  --tip: #f1f1f5;           /* the name over a reaction in the bar */
  --focus: #f1f1f5;         /* the ring of the keyboard's focus */
  --track: #ff6b3d;         /* the club's track in the head */
  --r-kudos: #5f8eff;       /* Kudos */
  --r-love: #ff5479;        /* Love */
  --r-haha: #ffc83f;        /* Haha */
  --r-fire: #ff7a35;        /* Fire */
  --r-fast: #35d6a8;        /* Fast */
  --r-medal: #b68cff;       /* Medal */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.chat {
  --line: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(390px, 100%);
  height: min(640px, calc(100svh - 48px));
  min-height: 520px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--edge);
  overflow: hidden;
  isolation: isolate;
}

/* ---------------------------------------------------------------- the head */
.chat__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}

.chat__mark {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1b1b21;
  fill: none;
  stroke-linecap: round;
}

.mark__track {
  stroke: var(--track);
  stroke-width: 2.4;
}

.mark__lane {
  stroke: #45454f;
  stroke-width: 1.6;
}

.mark__line {
  stroke: var(--ink);
  stroke-width: 2.4;
}

.chat__title {
  min-width: 0;
}

.chat__name {
  margin: 0;
  font-size: 16px;
  font-weight: 680;
  font-stretch: 96%;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.chat__sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 16px;
}

/* ---------------------------------------------------------------- the messages */
.chat__thread {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* the oldest messages fade out under the head */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px);
  mask-image: linear-gradient(180deg, transparent 0, #000 20px);
}

.chat__thread::-webkit-scrollbar {
  display: none;
}

.chat__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding: 12px 12px 8px;
}

.chat__log {
  margin: 0;
  padding: 0;
  list-style: none;
}

.msg {
  position: relative;
  transition: opacity 0.3s ease;
}

/* the bar open over a message, or a line running round it: the others step back */
.chat.is-focus .msg:not(.is-lit) {
  opacity: 0.34;
}

.msg + .msg {
  margin-top: 16px;
}

.msg__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.msg__face {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--face) 20%, #16161b);
  color: var(--face);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}

.bubble {
  position: relative;
  min-width: 0;
  max-width: calc(100% - 36px - 52px);
  padding: 8px 12px;
  border-radius: 18px 18px 18px 6px;
  background: var(--bubble);
}

.bubble__who {
  margin: 0 0 2px;
  color: var(--name);
  font-size: 13px;
  font-weight: 620;
  line-height: 17px;
}

.bubble__text {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  overflow-wrap: anywhere;
}

/* room on the last line for the time */
.bubble__room {
  display: inline-block;
  width: 38px;
}

.bubble__time {
  position: absolute;
  right: 11px;
  bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}

/* a finger resting on a message opens the bar: the words are not selected and the phone's own menu stays shut */
@media (hover: none) {
  .bubble {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ---------------------------------------------------------------- the React button beside a message */
.react {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.react__in {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1a1a20;
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  transition: transform 0.16s ease-out, background-color 0.2s ease;
}

.react svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.react:focus-visible,
.react[aria-expanded='true'],
.msg.is-demo .react {
  opacity: 1;
}

.react[aria-expanded='true'] {
  color: var(--ink);
}

.react:active .react__in {
  transform: scale(0.9);
}

.react:focus-visible {
  outline: none;
}

.react:focus-visible .react__in {
  box-shadow: inset 0 0 0 1px var(--chip-edge), 0 0 0 2px var(--card), 0 0 0 4px var(--focus);
}

@media (hover: hover) and (pointer: fine) {
  .msg:hover .react {
    opacity: 1;
  }

  .react:hover {
    color: var(--ink);
  }

  .react:hover .react__in {
    background: #24242b;
  }
}

/* ---------------------------------------------------------------- the reactions under a message */
.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0 36px;
}

.chips:empty {
  display: none;
}

.chip {
  position: relative;
  flex: none;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chip-ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the finger's target is 44 pixels tall */
.chip::before {
  content: '';
  position: absolute;
  inset: -7px -4px;
}

.chip__in {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: 15px;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.chip__ic {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

.chip__ic .icon {
  display: block;
  width: 20px;
  height: 20px;
}

.chip__count {
  position: relative;
  display: block;
  height: 16px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 620;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.chip__num {
  display: block;
  white-space: nowrap;
}

.chip__num.is-going {
  position: absolute;
  left: 0;
  top: 0;
}

/* my reaction: in its own colour */
.chip.is-mine .chip__in {
  background: color-mix(in srgb, var(--c) 17%, var(--chip));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 72%, transparent);
}

.chip.is-mine .chip__count {
  color: color-mix(in srgb, var(--c) 42%, #ffffff);
}

.chip:focus-visible {
  outline: none;
}

.chip:focus-visible .chip__in {
  box-shadow: inset 0 0 0 1px var(--chip-edge), 0 0 0 2px var(--card), 0 0 0 4px var(--focus);
}

.chip.is-mine:focus-visible .chip__in {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 72%, transparent), 0 0 0 2px var(--card), 0 0 0 4px var(--focus);
}

.chip__press {
  display: block;
  transition: transform 0.16s ease-out;
}

.chip:active .chip__press {
  transform: scale(0.93);
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover .chip__in {
    background: #2a2a33;
    box-shadow: inset 0 0 0 1px #3d3d48;
  }

  .chip.is-mine:hover .chip__in {
    background: color-mix(in srgb, var(--c) 26%, var(--chip));
    box-shadow: inset 0 0 0 1.5px var(--c);
  }
}

/* a reaction on its way out */
.chip.is-ghost {
  position: absolute;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the drawings */
.icon {
  overflow: visible;
}

.ic-fill {
  fill: var(--c);
  fill-opacity: 0.22;
  stroke: none;
}

.ic-line,
.ic-more {
  fill: none;
  stroke: var(--c);
  stroke-width: var(--line);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ic-solid {
  fill: var(--c);
  stroke: none;
}

/* ---------------------------------------------------------------- the bar of reactions */
.bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 26px;
  background: var(--bar);
  box-shadow: inset 0 0 0 1px var(--bar-edge), 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 36px -10px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  will-change: transform, opacity;
}

.bar.is-open {
  visibility: visible;
}

.bar__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bar__lift {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1), background-color 0.2s ease;
}

.bar__btn .icon {
  display: block;
  width: 28px;
  height: 28px;
}

/* the one under the pointer, the finger or the keys lifts and grows */
.bar__btn.is-hot .bar__lift {
  transform: translateY(-6px) scale(1.22);
}

/* my reaction to this message */
.bar__btn[aria-pressed='true'] .bar__lift {
  background: color-mix(in srgb, var(--c) 22%, transparent);
}

.bar__btn:focus-visible {
  outline: none;
}

.bar__btn:focus-visible .bar__lift {
  box-shadow: 0 0 0 2px var(--focus);
}

.bar__btn:active .bar__lift {
  transform: translateY(-4px) scale(1.08);
}

/* the name of the one that lifts */
.bar__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  padding: 4px 9px;
  border-radius: 9px;
  background: var(--tip);
  color: #121216;
  font-size: 12px;
  font-weight: 640;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bar__btn.is-hot .bar__lift,
  .bar__btn:active .bar__lift {
    transform: none;
    background: rgba(255, 255, 255, 0.07);
  }

  .bar__btn[aria-pressed='true'].is-hot .bar__lift {
    background: color-mix(in srgb, var(--c) 30%, transparent);
  }

  .bar__lift,
  .chip__press,
  .react__in {
    transition: background-color 0.2s ease;
  }

  .chip:active .chip__press,
  .react:active .react__in {
    transform: none;
  }
}

/* ---------------------------------------------------------------- the lines that run */
.chat__runs {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.run__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.run__head {
  stroke: var(--card);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- the foot */
.chat__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border-top: 1px solid var(--rule);
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.chat__foot svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* for screen readers only */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .stage {
    padding: 16px;
  }

  /* on a phone the messages take the room: the React button, there for the keys and the mouse, goes to the end of
     the row of reactions */
  .bubble {
    max-width: calc(100% - 36px - 22px);
  }

  .react {
    position: absolute;
    right: -4px;
    bottom: -7px;
  }

  .chat {
    height: min(640px, calc(100svh - 32px));
  }
}