/* Bot menu constructor (web/menu-builder.js, web/layout-editor.js, web/effects-menu-editor.js):
   buttons in rows, exactly as the Telegram keyboard draws them. Tokens come from style.css. */

.mb-tabs { margin-top: 4px; }
.mb-tabs .mb-dot { width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--warn); display: inline-block; vertical-align: middle; }
.mb-preview-tools { margin-bottom: 12px; }
.mb-error { border-color: var(--danger); }
.mb-error p { margin-bottom: 4px; }
.mb-error code { color: var(--text-2); }
.mb-legacy { margin-top: 0; margin-bottom: 16px; }
.mb-legacy p { margin: 0; color: var(--text-2); font-size: 14px; }
.mb-screens { flex-wrap: wrap; max-width: 100%; }
.mb-screens button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-category .section-title { margin-bottom: 0; }
.mb-category h3 { margin-bottom: 2px; }
#le-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Row editor ---------- */
.le { display: grid; gap: 10px; min-width: 0; }
.le-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.le-toolbar .segmented button { min-height: 36px; }
.le-rows { display: grid; gap: 0; margin: 0; padding: 10px; border-radius: var(--radius-lg); background: var(--bg-deep); list-style: none; }
.le-row { display: grid; gap: 6px; min-width: 0; padding: 6px; border: 1px dashed transparent; border-radius: 14px; transition: border-color .12s var(--ease), background-color .12s var(--ease); }
.le-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.le-row-name { color: var(--muted); font-size: 12px; font-weight: 550; letter-spacing: .02em; }
.le-size { padding: 2px; border-radius: 9px; }
.le-size button { min-width: 30px; min-height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12px; }
.le-row-items { display: grid; gap: 6px; min-width: 0; }
.le-row-items.le-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.le-row-items.le-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.le-empty { padding: 10px 4px; color: var(--muted); font-size: 13px; }

.le-item {
  min-width: 0; min-height: 52px; justify-content: flex-start; gap: 8px; padding: 6px 10px 6px 6px;
  border: 1px solid transparent; border-radius: 10px; background: var(--panel-3); color: var(--text);
  font-size: 14px; font-weight: 550; text-align: left; cursor: grab; user-select: none; -webkit-user-select: none;
}
.le-item:hover { background: #3c3c42; }
.le-item:active { transform: none; }
.le-text { display: grid; min-width: 0; gap: 1px; }
.le-label, .le-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-sub { color: var(--muted); font-size: 12px; font-weight: 450; }
/* The grip: a finger drags here, so the rest of the button still scrolls the page. */
.le-grip {
  flex: none; width: 14px; height: 30px; border-radius: 6px; touch-action: none; cursor: grab;
  background-image: radial-gradient(circle, var(--muted) 1.3px, transparent 1.6px); background-size: 7px 7px; background-position: center;
}
.le-item.is-selected { border-color: var(--tg); box-shadow: 0 0 0 1px var(--tg); }
.le-item.is-hidden { border-style: dashed; border-color: var(--line-2); background: transparent; color: var(--text-2); }
.le-item.is-hidden .le-label { text-decoration: line-through; text-decoration-color: var(--muted); }
.le-item.is-warn { border-style: dashed; border-color: rgb(228 174 79 / .55); }
.le-item.is-warn .le-sub { color: var(--warn); }
.le-item.is-error { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.le-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.le-actions .le-arrow { min-width: 44px; padding: 0 10px; font-size: 16px; }

/* Dragging: the floating copy follows the pointer; places to drop light up. */
.le-item.le-ghost { position: fixed; z-index: 80; left: 0; top: 0; margin: 0; pointer-events: none; opacity: .94; box-shadow: var(--shadow-pop); border-color: var(--tg); }
.le-dragged { opacity: .35; }
.le-gap { height: 4px; margin: 0 6px; border: 1px dashed transparent; border-radius: 8px; transition: height .12s var(--ease); }
.le-dragging .le-gap { height: 16px; }
.le-dragging .le-gap.le-gap-on { height: 34px; border-color: var(--tg); background: rgb(26 123 190 / .14); }
.le-dragging .le-row { border-color: var(--line); }
.le-row.le-into { border-color: var(--tg); background: rgb(26 123 190 / .08); }
.le-row.le-full { border-color: rgb(242 122 111 / .7); background: rgb(242 122 111 / .06); }
/* Where the button will land: a Telegram-blue bar beside its new neighbour. */
.le-item { position: relative; }
.le-item.le-before::after, .le-item.le-after::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--tg); }
.le-item.le-before::after { left: -6px; }
.le-item.le-after::after { right: -6px; }
.le-reflow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }

/* ---------- Effects picker ---------- */
.fx-pick-list { display: grid; max-height: min(52svh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.fx-pick-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.fx-pick-item:first-child { border-top: 0; }
.fx-pick-item.is-off .fx-pick-text { opacity: .7; }
.fx-pick-text { display: grid; min-width: 0; }
.fx-pick-text strong, .fx-pick-text small { overflow-wrap: anywhere; }
.fx-pick-text small { color: var(--muted); }

/* ---------- Preview: category buttons open like in the bot ---------- */
.tgp-button.tgp-open { min-width: 0; min-height: 0; display: block; border: 1px solid var(--line-2); background: var(--panel-3); color: var(--text); font-size: 13px; font-weight: 450; line-height: inherit; cursor: pointer; }
.tgp-button.tgp-open:hover { background: #3c3c42; }
.tgp-button.tgp-open::after { content: " ›"; color: var(--muted); }
.tgp-button.tgp-open.tgp-back::after { content: none; }

@media (max-width: 619px) {
  .le-rows { padding: 6px; }
  .le-row { padding: 4px; }
  .le-item { gap: 6px; padding: 6px 6px 6px 4px; font-size: 13px; }
  .le-grip { width: 10px; }
  /* Three in a row on a phone: two lines of label rather than three letters and an ellipsis. */
  .le-label { display: -webkit-box; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .le-row-items.le-n3 .le-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .le-row, .le-gap { transition: none; }
}
/* Translations into the other bot languages (web/menu-localize.js, profile templates). */
.mb-subtitle { margin: 18px 0 4px; font-size: 15px; font-weight: 650; }
.mb-loc-progress { margin: 8px 0; color: var(--text); font-variant-numeric: tabular-nums; }
.mb-loc-results { max-height: 40vh; overflow: auto; margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.mb-loc-results .is-failed { color: var(--warn); }

/* ---------- Effects tab: status banner and prefill notice (web/effects-menu-editor.js) ---------- */
/* «N of M effects are available in the bots now», the reasons as quiet pills, links to the filtered catalogue. */
.card.mb-fx-status { display: grid; gap: 10px; padding: 14px 16px; }
.mb-fx-status-text { margin: 0; color: var(--text); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.mb-fx-status-text strong { font-weight: 600; }
.mb-fx-status-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mb-fx-status-reasons .pill { min-height: 24px; font-size: 12px; font-variant-numeric: tabular-nums; }
.mb-fx-status-actions { gap: 8px; }
/* The editor holds the bots' automatic screen until the first save: a neutral card, not a warning. */
.card.mb-notice.mb-prefill { margin-top: 0; padding: 14px 16px; border-color: var(--line-2); border-left: 3px solid var(--tg); background: var(--panel); }
.mb-prefill p { margin: 0; color: var(--text); line-height: 1.45; }
.mb-prefill p.field-hint { margin-top: 4px; color: var(--muted); }
/* The picker: «Open in the catalogue» beside the add button of an effect the bots do not offer now. */
.fx-pick-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
@media (min-width: 620px) {
  .mb-fx-status-actions .small { min-height: 36px; }
}
@media (max-width: 479px) {
  .mb-fx-status-actions .small { flex: 1 1 auto; }
  .fx-pick-item.is-off { flex-wrap: wrap; }
  .fx-pick-item.is-off .fx-pick-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* ---------- «Вход в бота»: the 18+ switch (web/menu-onboarding.js) ---------- */
.check-row.ob-gate { margin: 14px 0 6px; }
.ob-gate strong { font-weight: 600; }
.ob-gate input { flex: none; margin-top: 3px; }
/* The preview's step switcher (1 · Language … Refusal): whole labels, wrapping onto a second line when narrow. */
.segmented:has(> [data-action="mb-tg-ob"]) { flex-wrap: wrap; }
.segmented > [data-action="mb-tg-ob"] { flex: 1 1 auto; white-space: nowrap; }

/* ---------- Cards with their own save: «Ссылки», «Приветствие и картинка», «Кнопка под результатом»
   (web/menu-links.js, web/menu-welcome.js, web/menu-result-button.js) ---------- */
.mb-ln-field + .mb-ln-field { margin-top: 10px; padding-top: 2px; border-top: 1px solid var(--line); }
.mb-ln-field .field-hint { margin-top: 4px; }
/* Addresses in hints break anywhere: a long link never widens the page on a phone. */
.mb-ln-url { color: var(--text-2); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; word-break: break-all; }
.mb-ln-legacy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mb-ln-legacy .small, .mb-links-hint .small, .mb-wc-actions .small { min-height: 34px; padding: 0 12px; font-size: 13px; }
.mb-ln-error { color: var(--danger); }
.mb-editor [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.mb-inline-notice { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--warn); border-radius: var(--radius-md); background: var(--panel-2); }
.mb-inline-notice p { margin: 0; line-height: 1.45; }
.mb-inline-notice p + p { margin-top: 4px; }
.mb-inline-notice.mb-error { border-color: var(--danger); }
.mb-wc-picture { margin-top: 8px; max-width: 100%; }
.mb-wc-actions { gap: 8px; margin-top: 8px; }
.mb-links-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mb-fx-raw code { color: var(--text-2); font-size: 12px; overflow-wrap: anywhere; }
.segmented:has(> [data-action="mb-tg-links"]) { flex-wrap: wrap; }

/* Preview steps form balanced rows; Telegram keyboard rows themselves stay intact. */
.ob-steps, .ob-steps .segmented { width: 100%; }
.ob-steps .segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-steps .segmented button { white-space: normal; }