/* Telegram chat previews (web/tg-chat.js): the menu constructor and the welcome editor. The graphite palette of
   style.css; Telegram blue only where Telegram itself is blue (START, links, the user's own message). */

.tgx { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 22px; background: var(--bg-deep); }
.tgx-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.tgx-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: linear-gradient(160deg, #3d79a8, #26577e); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1; }
.tgx-avatar-big { width: 72px; height: 72px; font-size: 24px; }
.tgx-who { display: grid; min-width: 0; line-height: 1.25; }
.tgx-who strong { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tgx-who small { color: var(--muted); font-size: 12px; }
/* The message pinned in the chat (the permanent link): a bar under the header. */
.tgx:has(> .tgx-pin) { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.tgx-pin { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 14px; border-bottom: 1px solid var(--line); border-inline-start: 3px solid #3d8fd1; background: var(--panel); font-size: 13px; }
.tgx-pin-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The history scrolls; column-reverse keeps the newest message in view, like Telegram. */
.tgx-body { display: flex; flex-direction: column-reverse; min-height: 300px; max-height: min(62svh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px;
  background: radial-gradient(circle at 20% 15%, rgb(255 255 255 / .025), transparent 40%), radial-gradient(circle at 85% 70%, rgb(26 123 190 / .05), transparent 45%), var(--bg-deep); }
.tgx-flow { flex: 1 0 auto; display: grid; gap: 8px; align-content: end; }
.tgx-flow:has(> .tgx-intro:only-child) { align-content: center; }

.tgx-intro { justify-self: center; max-width: min(100%, 300px); padding: 12px 14px; border-radius: 14px; background: var(--panel-2); color: var(--text); font-size: 14px; line-height: 1.45; }
.tgx-intro strong { display: block; margin-bottom: 6px; font-weight: 600; }
.tgx-intro p { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tgx-intro-empty { background: rgb(255 255 255 / .04); }
.tgx-intro-empty p { color: var(--muted); text-align: center; }

.tgx-msg { display: grid; gap: 4px; min-width: 0; }
.tgx-in { justify-self: start; width: 100%; max-width: 340px; }
.tgx-out { justify-self: end; max-width: 80%; }
.tgx-bubble { min-width: 0; overflow: hidden; border-radius: 14px 14px 14px 4px; background: var(--panel-2); color: var(--text); font-size: 14px; line-height: 1.45; }
.tgx-out .tgx-bubble { padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: rgb(26 123 190 / .42); }
.tgx-text { padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tgx-text blockquote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--tg); white-space: pre-wrap; }
.tgx-text code, .tgx-text pre { border-radius: 4px; background: var(--panel-3); font-family: var(--font-mono); font-size: 13px; }
.tgx-text code { padding: 0 4px; }
.tgx-text pre { margin: 4px 0; padding: 6px 8px; white-space: pre-wrap; }
/* A spoiler stays readable for the creator, under Telegram's speckled veil. */
.tgx-text .tgx-spoiler { border-radius: 3px; background-color: rgb(255 255 255 / .1); background-image: radial-gradient(rgb(255 255 255 / .28) .8px, transparent 1px); background-size: 4px 4px; }
.tgx-text blockquote.is-expandable { position: relative; padding-right: 18px; }
.tgx-text blockquote.is-expandable::after { content: "\2304"; position: absolute; right: 4px; bottom: 2px; color: var(--muted); font-size: 12px; }
.tgx-media { display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover; background: var(--panel-3); }
.tgx-msg .tgp-keyboard { gap: 4px; }
.tgx-msg .tgp-row { gap: 4px; }
.tgx-msg .tgp-button { border-radius: 8px; background: rgb(255 255 255 / .07); }
.tgx-msg .tgp-button.tgp-open { border: 0; background: rgb(255 255 255 / .1); }
/* Button styles of the Bot API: primary (blue), success (green), danger (red), after the plain and clickable buttons so they keep their colour. */
.tgx-msg .tgp-button.is-primary { background: rgb(26 123 190 / .42); }
.tgx-msg .tgp-button.is-success { background: rgb(90 196 143 / .28); }
.tgx-msg .tgp-button.is-danger { background: rgb(242 122 111 / .24); }

.tgx-foot { padding: 8px 10px; border-top: 1px solid var(--line); background: var(--panel); }
.tgx-start { display: block; padding: 9px 10px; border-radius: 10px; color: var(--tg-hover); font-size: 14px; font-weight: 650; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.tgx-input { display: block; padding: 8px 14px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 14px; }

/* The bot's profile: avatar, name, «About» and the username. */
.tgx.tgx-profile { grid-template-rows: none; gap: 12px; padding: 18px 14px 4px; background: var(--panel); }
.tgx-profile-head { display: grid; justify-items: center; gap: 4px; text-align: center; }
.tgx-profile-head strong { margin-top: 6px; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.tgx-profile-head small { color: var(--muted); font-size: 13px; }
.tgx-facts { display: grid; border-top: 1px solid var(--line); }
.tgx-fact { display: grid; gap: 2px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.tgx-fact:last-child { border-bottom: 0; }
.tgx-fact-value { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tgx-fact-label { color: var(--muted); font-size: 12px; }

.tgx-caption { margin: 6px 0 2px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.tgx-note { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* The preview card's controls: language and sample bot side by side, the toggles compact. */
.mb-preview-card .section-title { margin-bottom: 10px; }
.tgx-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tgx-selects .i18n-preview { display: grid; gap: 4px; min-width: 0; font-size: 12px; }
.tgx-selects select { width: 100%; max-width: none; min-height: 40px; padding-right: 30px; font-size: 14px; text-overflow: ellipsis; }
#mb-tg-tools .mb-preview-tools { gap: 6px; margin-bottom: 10px; }
#mb-tg-tools .segmented { padding: 3px; flex-wrap: wrap; }
#mb-tg-tools .segmented button { flex: none; min-height: 34px; padding: 0 10px; white-space: nowrap; }

/* «Обработка и ссылки» → welcome: the fields and, beside them on a wide screen, what a new user gets. */
.wp-layout { display: grid; gap: 16px; min-width: 0; }
.wp-fields { min-width: 0; }
.wp-preview { display: grid; gap: 10px; align-content: start; min-width: 0; }
.wp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wp-head strong { font-size: 14px; }

@media (min-width: 960px) {
  /* The side panel fits the screen: the chat scrolls inside, the card itself only when it must. */
  .mb-preview-card { max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; }
  .mb-preview-card .tgx-body { max-height: clamp(240px, calc(100svh - 440px), 560px); }
}
@media (min-width: 1200px) {
  .mb-layout { grid-template-columns: minmax(0, 1fr) 400px; }
}
@media (min-width: 1000px) {
  dialog:has(.wp-layout) { width: min(1040px, calc(100vw - 24px)); }
  .wp-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .wp-preview { position: sticky; top: 0; }
}