/* ==========================================================================
   MKH - Email and Telegram
   Requires tokens.css, base.css, components.css and layout.css.

   The Email, Telegram and Recipients tabs of Settings. Mostly the shared
   cards, tables, drawers and dialogs; what is here is the few things those
   do not already have: numbered steps, the bot's own line, and the connect
   window with its QR code.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Steps and notes
   -------------------------------------------------------------------------- */

.msg-steps {
  margin: 0 0 var(--sp-3);
  padding-left: 1.4em;
  display: grid;
  gap: var(--sp-2);
  color: var(--txt);
  font-size: var(--fs-base);
  line-height: 1.5;
}

.msg-steps--tight { gap: var(--sp-1); font-size: var(--fs-md); }

/* base.css takes the markers off every list item; these lists want theirs. */
.msg-steps > li { list-style: decimal; }
.msg-notes > li { list-style: disc; }

.msg-notes {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--sp-2);
  color: var(--txt-2);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.msg-steps a,
.msg-notes a { color: var(--text-link); }

/* A fold-out of help inside a form or a dialog. Closed, it is one line. */
.msg-help {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: left;
}

.msg-help > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--txt);
  font-size: var(--fs-md);
}

.msg-help[open] > summary { margin-bottom: var(--sp-3); }

/* A table cell with a badge over a line of detail. A column that packs from
   the start, so the badge keeps its own width instead of stretching across. */
.msg-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* A warning under a row's first line. A sentence, so it wraps rather than
   being cut off the way a row's mono second line is. */
.msg-note {
  display: block;
  max-width: 42ch;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--warn-fg);
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Buttons in a row, and the bot's own line
   -------------------------------------------------------------------------- */

.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-3);
}

.msg-danger { color: var(--bad); }

.msg-bot {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}

.msg-bot__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--primary-soft);
  color: var(--primary-soft-fg);
}

.msg-bot__icon svg { width: 20px; height: 20px; }

.msg-bot a { color: var(--text-link); font-weight: 600; }

/* The bot line says who set the bot up and when, so on a phone it wraps
   rather than cutting that off the way a table cell would, and a long
   username breaks where it has to. */
.msg-bot .person__text { flex: 1 1 auto; }
.msg-bot .person__name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.msg-bot .person__meta { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   The connect window
   -------------------------------------------------------------------------- */

/* Wider than a confirmation: it carries a QR code beside its steps. It is a
   grid item, so without a minimum of its own its widest unbreakable line set
   its width: the recent chats list once pushed it to 456 pixels on a
   320-pixel phone. */
.confirm__box.tg-connect { max-width: 620px; width: 100%; min-width: 0; }

.tg-connect__grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin-top: var(--sp-3);
  text-align: left;
}

/* Black on white whatever the theme, with room around it, because that is
   what a phone camera reads first time. */
.tg-qr {
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  line-height: 0;
}

.tg-qr svg { width: 100%; height: auto; display: block; }

/* A link that can no longer connect anybody: used, run out, or tapped and
   refused. Kept in place so the window does not jump, but faded and struck
   through, so nobody scans it or sends it on. */
.tg-connect__grid--dead .tg-qr,
.tg-connect__grid--dead .tg-link { opacity: 0.3; filter: grayscale(1); }
.tg-connect__grid--dead .tg-link { text-decoration: line-through; }

/* Who is being connected: a person's own chat with the bot, or a group. Side
   by side where both fit, one above the other on a phone. */
.tg-kind {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2);
  align-self: stretch;
  margin-top: var(--sp-3);
  text-align: left;
}

.tg-kind .choice { padding: 9px 12px; }

.tg-link {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* Where connecting has got to. The mark pulses while waiting, so the window
   reads as alive while nothing appears to happen. */
.tg-status {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  align-self: stretch;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--txt);
  font-size: var(--fs-md);
  text-align: left;
}

.tg-status__mark {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--txt-3);
}

.tg-status--waiting .tg-status__mark { background: var(--primary); animation: tg-pulse 1.4s ease-in-out infinite; }
.tg-status--connected { background: var(--ok-bg); color: var(--ok-fg); }
.tg-status--connected .tg-status__mark { background: var(--ok); }
.tg-status--expired .tg-status__mark { background: var(--warn); }
.tg-status--problem .tg-status__mark { background: var(--bad); }

@keyframes tg-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .tg-status--waiting .tg-status__mark { animation: none; }
}

.tg-connect .msg-help { margin: var(--sp-4) 0 0; align-self: stretch; }

.tg-other { display: grid; gap: var(--sp-3); }

/* Buttons here wrap their words rather than setting the window's width: one
   long label on a single line once pushed the window past the edge of a
   320px phone. A button on one line keeps the size every small button has. */
.tg-other .btn {
  height: auto;
  min-height: 32px;
  white-space: normal;
  text-align: center;
}

.tg-recent {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

.tg-recent li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.tg-recent .person__text { flex: 1 1 160px; min-width: 0; }

/* Who wrote and when, said in full rather than cut short: the name and the
   username are what tell two people apart before one is chosen. */
.tg-recent .person__name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.tg-recent .person__meta { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

/* The box and its button share a row where there is room for both. On a
   phone the button goes under the box, so a group's fourteen-digit id, or
   the placeholder, shows whole instead of being cut beside the button. */
.tg-manual { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tg-manual .input { flex: 1 1 11rem; min-width: 0; }

@media (max-width: 620px) {
  .tg-connect__grid { grid-template-columns: minmax(0, 1fr); }
  .tg-qr { max-width: 200px; margin-inline: auto; }
}

/* On the narrowest phones the window keeps more of the width for itself. */
@media (max-width: 420px) {
  .tg-connect-wrap { padding: 10px; }
  .confirm__box.tg-connect { padding: 20px 14px 14px; }
}

/* Settings -> Recipients: a long name or address wraps in its own column
   instead of widening the table. As a table, the name and email columns ask
   for a share of the width and take no more, however long what is in them;
   the zero maximum is what lets them, since a cell is otherwise never made
   narrower than its content. Stacked, the address breaks anywhere rather than
   running past the card. Names wrap rather than being cut: a half-shown name
   is worse than two lines. */
@container content (width > 760px) {
  .table--recipients > thead > tr > .col-name,
  .table--recipients > tbody > tr > .col-name { width: 26%; min-width: 11rem; max-width: 0; }
  .table--recipients > thead > tr > .col-email,
  .table--recipients > tbody > tr > .col-email { width: 26%; min-width: 11rem; max-width: 0; }
}
.table--recipients .col-name .person__name,
.table--recipients .col-name .person__meta { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.table--recipients .col-email { overflow-wrap: anywhere; }

/* Recipient lists, under the recipients they are made from. */
.rl-card { margin-top: var(--sp-5); }
.rl-members { overflow-wrap: anywhere; }
.rl-count { font-size: var(--fs-sm); color: var(--txt-3); }

/* The people a list can be made of, ticked in place; the list scrolls on its
   own so the name and the buttons stay in reach on a long one. */
.rl-people {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  margin: 6px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.rl-people > li { border-bottom: 1px solid var(--line-soft); }
.rl-people > li:last-child { border-bottom: 0; }
.rl-person { display: flex; width: 100%; min-height: 42px; padding: 8px 12px; }
.rl-person__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-person__name { color: var(--txt); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.rl-person__how { font-size: var(--fs-sm); color: var(--txt-3); }

@media (pointer: coarse) {
  .tg-other .btn { min-height: 38px; }
  .rl-person { min-height: 48px; }
}