/* ============================================================
   Group chat, the look the owner asked for on 10 Oct 2026.

   He sent a React component (shadcn, Tailwind, TypeScript) and said "this
   is how i want it". This site is plain JavaScript and hand-written CSS
   with no build step, so the component itself cannot be dropped in: it
   would mean adding React, a bundler and Tailwind to a static shop. What
   it describes, though, is just a layout, and that ports exactly.

   From his reference, kept:
     - an avatar beside every bubble, his on the right, theirs on the left
     - solid brand for his, a 10% tint for theirs
     - system lines centred, plain, no bubble
     - the time under the bubble, small and quiet
     - a rounded pill composer with a round send button

   Scoped under .gchat so the one to one chats, which he has not asked to
   change, are untouched.
   ============================================================ */

/* The tokens are declared on the composer and the row as well as the
   wrapper. On the reseller panel the composer sat OUTSIDE .gchat, so
   --gc-brand never reached it: background: var(--gc-brand) was invalid and
   the send button came out as a white arrow on a transparent circle.
   Invisible, and the owner found it before any test did. The markup is
   fixed too, but a token that only works in one arrangement is a trap
   waiting for the next person who moves a div. */
.gchat,
.gc-compose,
.gc-row {
  --gc-brand: var(--admin-brand, #0164ce);
  --gc-ink: var(--admin-ink, #0f1b2d);
  --gc-muted: color-mix(in srgb, var(--gc-ink) 55%, transparent);
  --gc-tint: color-mix(in srgb, var(--gc-brand) 10%, transparent);
  --gc-line: var(--admin-line, #e3e9f4);
}

/* ---- the scroller -------------------------------------------------- */
.gchat__view {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 14px 4px;
  min-height: 300px;
  max-height: 52vh;
  overscroll-behavior: contain;
}

/* ---- one row: avatar, bubble, and the time under it ----------------- */
.gc-row {
  display: grid;
  align-items: end;
  column-gap: 8px;
  margin: 10px 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "avatar bubble" "none time";
  justify-items: start;
}
.gc-row--mine {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "bubble avatar" "time none";
  justify-items: end;
}

.gc-row__avatar {
  grid-area: avatar;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--gc-brand);
  overflow: hidden;
  user-select: none;
}
.gc-row__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gc-row__bubble {
  grid-area: bubble;
  width: fit-content;
  max-width: min(420px, 78%);
  min-width: 0;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--gc-tint);
  color: var(--gc-ink);
}
.gc-row--mine .gc-row__bubble { background: var(--gc-brand); color: #fff; }

.gc-row__who {
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gc-brand);
}
.gc-row--mine .gc-row__who { display: none; }

.gc-row__time {
  grid-area: time;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--gc-muted);
}

/* ---- a system line: centred, no bubble, no avatar ------------------- */
.gc-event {
  margin: 16px 0;
  text-align: center;
  font-size: 13px;
  color: var(--gc-muted);
}

.gc-empty { padding: 28px 10px; text-align: center; font-size: 13.5px; color: var(--gc-muted); }

/* ---- the composer --------------------------------------------------- */
.gc-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 7px 7px 7px 16px;
  border: 1px solid var(--gc-line);
  border-radius: 24px;
  background: var(--admin-card, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-compose:focus-within {
  border-color: var(--gc-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-brand) 18%, transparent);
}
.gc-compose__text {
  flex: 1 1 auto;
  min-width: 0;
  /* 16px up to a tablet, or iOS zooms the whole page on focus. */
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  border: 0;
  background: none;
  color: var(--gc-ink);
  resize: none;
  padding: 7px 0;
  /* An empty box measured 14px tall, because grow() sets the height from
     scrollHeight and an empty textarea has almost none. min-height wins
     over an inline height that is smaller, so one line is the floor. */
  min-height: 1.7em;
  max-height: 128px;
  overflow-y: auto;
}
.gc-compose__text:focus { outline: none; }
.gc-compose__send {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--gc-brand);
  color: #fff;
  transition: opacity .15s ease, transform .15s ease;
}
.gc-compose__send:disabled { opacity: .4; cursor: default; }
.gc-compose__send:not(:disabled):active { transform: scale(.94); }
.gc-compose__send svg { width: 18px; height: 18px; }

@media (min-width: 900px) { .gc-compose__text { font-size: 14.5px; } }

@media (prefers-reduced-motion: reduce) {
  .gc-compose, .gc-compose__send { transition: none; }
}

/* ---- the gestures ---------------------------------------------------
   Swipe to reply, double tap to react, hold for the menu: the same engine
   js/chat-ui.js runs on the one to one chats, pointed at .gc-row. The
   three buttons are in the markup because that engine reads their class
   names to know what a tap meant, but they are not shown: the gesture is
   the way in, exactly as the owner asked for in the live chat.
   ---------------------------------------------------------------------- */
.gchat .chat-msg__tools { display: none !important; }

.gchat .gc-row { position: relative; }

/* The quote above a reply. */
.gchat .chat-quote {
  display: block;
  margin-bottom: 6px;
  padding: 6px 9px;
  border-left: 3px solid currentColor;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  font-size: 12.5px;
  line-height: 1.35;
  text-decoration: none;
  color: inherit;
  opacity: .9;
}
.gchat .gc-row:not(.gc-row--mine) .chat-quote { background: rgba(10, 30, 70, .06); }
.gchat .chat-quote strong { display: block; font-size: 11.5px; }
.gchat .chat-quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A message somebody jumped to from a quote. */
.gchat .gc-row.is-flash .gc-row__bubble { animation: gcFlash 1.1s ease; }
@keyframes gcFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-brand) 35%, transparent); }
}

/* The reactions sit under the words, inside the bubble. */
.gchat .chat-msg__reactions { display: flex; gap: 4px; margin-top: 5px; }
.gchat .chat-reaction {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: inherit;
}
.gchat .gc-row:not(.gc-row--mine) .chat-reaction { background: rgba(10, 30, 70, .07); }
.gchat .chat-reaction--mine { cursor: pointer; outline: 1.5px solid currentColor; outline-offset: -1.5px; }

@media (prefers-reduced-motion: reduce) {
  .gchat .gc-row.is-flash .gc-row__bubble { animation: none; }
}

/* The message being answered, above the box. */
.gc-replybar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 7px 10px;
  border-left: 3px solid var(--gc-brand);
  border-radius: 8px;
  background: var(--gc-tint);
  font-size: 12.5px;
  color: var(--gc-ink);
}
.gc-replybar__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-replybar__x {
  flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}

/* ---- what came with a message --------------------------------------- */
.gchat .gc-att { display: block; margin-bottom: 6px; max-width: 100%; }
.gchat .gc-att--image img {
  display: block;
  max-width: min(260px, 100%);
  max-height: 260px;
  border-radius: 10px;
  object-fit: cover;
}
.gchat .gc-att--video { width: min(280px, 100%); border-radius: 10px; background: #000; }
.gchat .gc-att--audio { width: min(260px, 100%); }
.gchat .gc-att--file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.gchat .gc-row:not(.gc-row--mine) .gc-att--file { background: rgba(10, 30, 70, .06); }
.gchat .gc-row__text { display: block; }

/* ---- picking one ----------------------------------------------------- */
.gc-compose__clip {
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: -6px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gc-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.gc-compose__clip:hover:not(:disabled) { color: var(--gc-brand); }
.gc-compose__clip:disabled { opacity: .45; cursor: default; }
.gc-compose__clip svg { width: 19px; height: 19px; }

.gc-staged {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 7px 10px;
  border: 1px solid var(--gc-line);
  border-radius: 10px;
  font-size: 12.5px;
}
.gc-staged img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; }
.gc-staged__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-staged__x {
  flex: none; width: 24px; height: 24px; margin-left: auto;
  border: 0; border-radius: 50%; background: none; color: inherit;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.gc-status { margin: 0 0 6px; font-size: 12.5px; color: var(--gc-muted); }
.gc-status.is-bad { color: #b3261e; }

/* ---- what the group chat was missing ----
   Emoji, stickers and voice notes, 11 Oct 2026. The one-to-one chat has
   had all three; the group had a paperclip. The panels sit above the row
   rather than in it, because the row is a flex line and a grid of emoji
   dropped into it lands beside the text box. */
.gc-compose__icon {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gc-soft, #6b7280);
  cursor: pointer;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gc-compose__icon svg { width: 21px; height: 21px; }
.gc-compose__icon:hover { background: var(--gc-tint, #eef2f8); color: var(--gc-brand, #0164ce); }
.gc-compose__icon[aria-expanded="true"] { background: var(--gc-tint, #eef2f8); color: var(--gc-brand, #0164ce); }
.gc-compose__icon:disabled { opacity: .45; cursor: not-allowed; }

.gc-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 184px;
  overflow-y: auto;
  margin: 0 0 8px;
  padding: 8px;
  border-radius: 12px;
  background: var(--gc-tint, #eef2f8);
}

.gc-panel__btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gc-panel__btn:hover { background: rgb(255 255 255 / 85%); }
.gc-panel__btn--sticker { width: 52px; height: 52px; color: var(--gc-brand, #0164ce); }
.gc-panel__btn--sticker svg { width: 100%; height: 100%; }

/* A sticker is a drawing, not a file: no border, no name under it. */
.gc-att--sticker {
  display: block;
  width: 96px;
  height: 96px;
  color: var(--gc-brand, #0164ce);
}

.gc-att--sticker svg { width: 100%; height: 100%; }

/* On a phone the row ran out of width: a clip, a sticker, an emoji, a mic
   and a send button at 375px left the message box 30 pixels wide. The box
   takes a line of its own and the tools sit under it, so each keeps a
   finger-sized target instead of all of them being squeezed. */
@media (max-width: 560px) {
  .gc-compose {
    flex-wrap: wrap;
    border-radius: 20px;
    padding: 8px 8px 7px 14px;
  }

  .gc-compose__text {
    order: -1;
    flex: 1 0 100%;
    padding-bottom: 4px;
  }

  .gc-compose__send { margin-left: auto; }
  .gc-panel { max-height: 150px; }
}