/*
  The chat surface, built to WhatsApp's conventions.
  ---------------------------------------------------------------------------
  Those conventions are not arbitrary: the bubble geometry, the timestamp
  tucked inside the bubble, the run grouping, the day dividers and the sticky
  composer are what make a thread readable at a glance on a small screen, and
  they are what our members already have muscle memory for. Copying the layout
  is the point. What is deliberately ours is the wallpaper, which is drawn here
  in CSS rather than lifted, and the palette, which is variables so a club can
  run its own colours instead of WhatsApp green.

  Written as its own stylesheet rather than utility classes because tails,
  dividers and run grouping are structural rules, not a bag of spacing, and
  because scoping every control here keeps it clear of the theme's global
  button styling.
*/

/* An author `display` beats the browser's own `[hidden] { display: none }`,
   which quietly made hiding the notifications banner do nothing at all. Set
   once here so it holds for anything added later, not just that one element. */
.chat [hidden] { display: none !important; }

.chat {
  --wa-scale: 1;
  --wa-bg: #efeae2;
  --wa-in: #ffffff;
  --wa-out: #d9fdd3;
  --wa-ink: #111b21;
  --wa-meta: rgba(17, 27, 33, 0.45);
  --wa-panel: #f0f2f5;
  --wa-send: #00a884;
  --wa-divider: rgba(255, 255, 255, 0.92);
  --wa-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);

  position: relative; /* the message menu positions against this */
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--wa-ink);
  font-size: calc(14.2px * var(--wa-scale));
  line-height: calc(19px * var(--wa-scale));
  -webkit-text-size-adjust: 100%;
}

/* The full-screen thread fills the viewport and scrolls only its messages,
   which is what stops the composer sliding away up the page mid-sentence.
   dvh rather than vh because a phone's address bar changes the answer. */
/* Pinned to the viewport rather than laid out in the document, so nothing the
   page does can push the composer below the fold. The height here is only the
   starting point: chat.js takes it over from visualViewport, which is the only
   measurement that accounts for a browser toolbar overlaying the page and for
   the on-screen keyboard. dvh gets close on Android and is wrong on iOS Safari
   often enough to matter. */
.chat--full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
}

@supports (height: 100dvh) {
  .chat--full { height: 100dvh; }
}

/* ---------- header ---------- */

.chat__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--wa-panel);
  border-bottom: 1px solid rgba(11, 20, 26, 0.08);
  flex: none;
}

.chat__back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  border-radius: 50%;
  color: var(--wa-ink);
  text-decoration: none;
  flex: none;
}

.chat__back svg { width: 22px; height: 22px; }

.chat__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #6a7175;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  flex: none;
  overflow: hidden;
}

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

.chat__name {
  margin: 0;
  font-size: calc(16px * var(--wa-scale));
  font-weight: 600;
  line-height: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 16px;
  color: var(--wa-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- the wallpaper ---------- */

.chat__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* One finger still scrolls the thread; two fingers are ours, and the browser
     does not also zoom the page underneath. Without this a pinch does both at
     once and the result is neither. */
  touch-action: pan-y;
  padding: 12px 4% 8px;
  background-color: var(--wa-bg);
  /* Our own doodle, not theirs: three faint dot grids offset from each other,
     which reads as texture at arm's length and costs no request. */
  background-image:
    radial-gradient(circle at 12% 22%, rgba(11, 20, 26, 0.045) 1.5px, transparent 1.6px),
    radial-gradient(circle at 63% 71%, rgba(11, 20, 26, 0.035) 1.5px, transparent 1.6px),
    radial-gradient(circle at 87% 34%, rgba(11, 20, 26, 0.03) 1.2px, transparent 1.3px);
  background-size: 78px 78px, 121px 121px, 59px 59px;
}

.chat__panel {
  display: flex;
  flex-direction: column;
}

/* Everything in the thread moves as one block, pushed down so a short
   conversation rests on the composer rather than hanging from the top of an
   empty screen. */
.chat__stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.chat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- day dividers ---------- */

.chat__day {
  align-self: center;
  margin: 12px 0;
  padding: 5px 12px 6px;
  border-radius: 7.5px;
  background: var(--wa-divider);
  box-shadow: var(--wa-shadow);
  font-size: calc(12.5px * var(--wa-scale));
  font-weight: 500;
  text-transform: uppercase;
  color: var(--wa-meta);
  letter-spacing: 0.2px;
}

/* ---------- bubbles ---------- */

.chat__msg {
  position: relative;
  max-width: 85%;
  margin-top: 2px;
  padding: 6px 7px 8px 9px;
  border-radius: 7.5px;
  background: var(--wa-in);
  box-shadow: var(--wa-shadow);
  align-self: flex-start;
  overflow-wrap: anywhere;
}

.chat__msg--mine {
  align-self: flex-end;
  background: var(--wa-out);
}

/* A run of messages from one person reads as one turn, so only the first
   carries the tail, the name and the extra breathing room above it. */
.chat__msg--first { margin-top: 10px; }
.chat__msg--first { border-top-left-radius: 0; }
.chat__msg--mine.chat__msg--first {
  border-top-left-radius: 7.5px;
  border-top-right-radius: 0;
}

.chat__msg--first::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 13px;
  background: inherit;
  left: -8px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.chat__msg--mine.chat__msg--first::before {
  left: auto;
  right: -8px;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.chat__sender {
  display: block;
  margin-bottom: 1px;
  font-size: calc(12.8px * var(--wa-scale));
  font-weight: 500;
  line-height: calc(17px * var(--wa-scale));
}

.chat__text {
  margin: 0;
  white-space: pre-wrap;
  /* Room for the timestamp, which sits on the last line of the text rather
     than under it. This is the trick that keeps a one-word message small.
     Scaled with the type: the timestamp grows with everything else, and a
     fixed reservation gets overrun the moment somebody pinches out. */
  padding-right: calc(54px * var(--wa-scale));
}

.chat__msg--edited .chat__text { padding-right: calc(84px * var(--wa-scale)); }

.chat__meta {
  position: absolute;
  right: 7px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: calc(11px * var(--wa-scale));
  line-height: calc(15px * var(--wa-scale));
  color: var(--wa-meta);
  white-space: nowrap;
}

.chat__edited { font-style: italic; }

/* ---------- the action menu on your own message ---------- */

.chat__more {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 26px;
  border: 0;
  padding: 0;
  background: linear-gradient(to left, var(--wa-out) 60%, transparent);
  border-radius: 0 7.5px 0 8px;
  color: var(--wa-meta);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}

.chat__msg--mine:hover .chat__more,
.chat__msg--mine:focus-within .chat__more,
.chat__more:focus-visible { opacity: 1; }

.chat__more svg { width: 18px; height: 18px; }

.chat__menu {
  position: absolute;
  z-index: 30;
  min-width: 148px;
  padding: 6px 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(11, 20, 26, 0.28);
}

.chat__menu button {
  display: block;
  width: 100%;
  padding: 10px 18px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 14.5px;
  color: var(--wa-ink);
  cursor: pointer;
}

.chat__menu button:hover { background: rgba(11, 20, 26, 0.05); }
.chat__menu button.is-danger { color: #c0392b; }

/* ---------- composer ---------- */

.chat__composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--wa-panel);
}

.chat__input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 40vh;
  padding: 11px 14px;
  border: 0;
  border-radius: 21px;
  background: #fff;
  font: inherit;
  /* Never below 16px whatever the size setting: under that, iOS zooms the
     whole page the moment the field takes focus. */
  font-size: max(16px, calc(16px * var(--wa-scale)));
  line-height: calc(21px * var(--wa-scale));
  resize: none;
  outline: none;
}

.chat__send {
  flex: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--wa-send);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.chat__send svg { width: 22px; height: 22px; }

.chat__said {
  flex: none;
  margin: 0;
  padding: 6px 14px;
  background: var(--wa-panel);
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
}

.chat__empty {
  align-self: center;
  margin: 24px 8px;
  padding: 10px 14px;
  border-radius: 7.5px;
  background: var(--wa-divider);
  box-shadow: var(--wa-shadow);
  font-size: 13.5px;
  color: var(--wa-meta);
  text-align: center;
}

/* The banner offering notifications, styled as WhatsApp styles its own
   in-thread notices rather than as a button bolted to the top. */
/* A suggestion, not a warning. Sits in the thread the way WhatsApp's own
   system notices do, rather than as a coloured bar shouting above it. */
.chat__nudge {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 8px 0;
  padding: 7px 8px 7px 14px;
  border-radius: 7.5px;
  background: var(--wa-divider);
  box-shadow: var(--wa-shadow);
  font-size: 12.5px;
  color: var(--wa-meta);
}

.chat__nudge button {
  flex: none;
  padding: 5px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--wa-send);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- the home page widget ---------- */

.chat--widget {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(11, 20, 26, 0.12);
}

.chat--widget .chat__panel {
  height: 46vh;
  min-height: 220px;
  max-height: 420px;
}

@media (min-width: 640px) {
  .chat__msg { max-width: 65%; }
  .chat--widget .chat__panel { height: 340px; }
}

/* ---------- the conversation list ---------- */

.inbox {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.inbox__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 15px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(11, 20, 26, 0.08);
}

.inbox__row:active { background: rgba(11, 20, 26, 0.05); }

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

.inbox__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.inbox__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox__when {
  flex: none;
  font-size: 12px;
  color: var(--wa-meta);
}

.inbox__last {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  line-height: 20px;
  color: var(--wa-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox__quiet { font-style: italic; }

.inbox__none {
  margin: 0;
  padding: 28px 20px;
  color: var(--wa-meta);
  text-align: center;
  font-size: 14px;
}

/* The text size control, where somebody who cannot read the thread will
   actually find it rather than behind a settings page. */
.chat__size {
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--wa-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.chat__size:active { background: rgba(11, 20, 26, 0.08); }

/* ---------- the visitor's panel ---------- */

/* Somebody who has just found the site has no conversations of their own, so
   they get this one instead of a login they cannot use: a panel over the page
   they were reading, reaching whoever runs the club. */
.ask {
  position: fixed;
  z-index: 1200;
  right: 16px;
  bottom: 84px;
  left: 16px;
  max-width: 380px;
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--wa-bg, #efeae2);
  box-shadow: 0 12px 32px rgba(11, 20, 26, 0.28);
  font-family: inherit;
}

@media (min-width: 480px) {
  .ask { left: auto; width: 380px; }
}

.ask[hidden] { display: none; }

.ask__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 12px 16px;
  background: var(--wa-panel, #f0f2f5);
}

.ask__title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--wa-ink, #111b21);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ask__close {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-ink, #111b21);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ask__close svg { width: 20px; height: 20px; }

.ask__intro {
  padding: 16px;
  background: #fff;
}

.ask__hello {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--wa-ink, #111b21);
}

.ask__start { display: grid; gap: 6px; }

.ask__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-meta, rgba(17, 27, 33, 0.45));
}

.ask__input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(11, 20, 26, 0.2);
  border-radius: 8px;
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
}

.ask__go {
  justify-self: start;
  margin-top: 4px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 22px;
  background: var(--wa-send, #00a884);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* The thread inside the panel is the same one the rest of the site draws; it
   just has a ceiling rather than a whole screen. */
.chat--ask {
  flex: 1 1 auto;
  min-height: 0;
}

.chat--ask .chat__panel { padding: 10px 12px 6px; }