/* Мини-приложение «Генератор UTM-меток» (/mini-app/utm-generator) */

/* ноутбук и шире: форма | ссылка и история (прилипают при прокрутке)
   телефон и планшет: форма, ссылка, история друг под другом */
.utm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.utm-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1101px) {
  .utm-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
  .utm-side { position: sticky; top: calc(var(--topbar-h) + 20px); }
}

/* ---------- форма ---------- */
.utm-presets .chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-size: 13px; }
.utm-presets .chip i { font-size: 16px; }

.utm-params { display: flex; flex-direction: column; gap: 8px; }
#utm-custom { display: contents; }
.utm-param {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px;
}
.utm-param__name { display: flex; flex-direction: column; line-height: 1.3; }
.utm-param__name code { font-size: 13px; font-weight: 700; color: var(--text); }
.utm-param__name small { font-size: 12px; color: var(--text-3); }
.utm-param--custom { grid-template-columns: 150px minmax(0, 1fr) auto; }
.utm-param--custom .utm-custom__name { font-weight: 700; }
.utm-custom__remove:hover { color: var(--danger); background: var(--danger-soft); }
.utm-add { margin-top: 12px; }
@media (max-width: 520px) {
  .utm-param { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .utm-param__name { flex-direction: row; align-items: baseline; gap: 8px; }
  .utm-param--custom { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 6px; }
}

.utm-macros { margin-top: 20px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.utm-macro { display: inline-flex; align-items: center; gap: 6px; }
.utm-macro code { font-weight: 700; color: var(--brand-soft-text); }
.utm-macro span { font-weight: 500; color: var(--text-3); }

.utm-switches { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }

/* ---------- готовая ссылка ---------- */
.utm-result .empty { padding: 28px 12px; }
.utm-output {
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  font: 13px/1.7 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  word-break: break-all; user-select: all;
  max-height: 320px; overflow: auto;
}
.utm-hl-base { color: var(--text); font-weight: 600; }
.utm-hl-page { color: var(--text-2); }
.utm-hl-sep { color: var(--text-3); }
.utm-hl-name { color: var(--brand-soft-text); font-weight: 700; }
.utm-hl-macro { color: var(--success); font-weight: 600; }

.utm-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.utm-notes:empty { display: none; }
.utm-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text);
}
.utm-note i { font-size: 18px; flex-shrink: 0; }
.utm-note--warn { background: var(--warning-soft); }
.utm-note--warn i { color: var(--warning); }
.utm-note--error { background: var(--danger-soft); }
.utm-note--error i { color: var(--danger); }
.utm-note--info { background: var(--surface-2); color: var(--text-2); }
.utm-note--info i { color: var(--text-3); }

.utm-actions { display: flex; gap: 8px; margin-top: 16px; }
.utm-actions #utm-copy { flex: 1; }
@media (max-width: 400px) {
  .utm-actions { flex-wrap: wrap; }
  .utm-actions #utm-copy { flex-basis: 100%; }
  .utm-actions #utm-copy-tags { flex: 1; }
}

/* ---------- история ---------- */
.utm-history { padding: 6px; max-height: 320px; overflow: auto; }
.utm-history .empty { padding: 20px 16px; font-size: 13px; }
.utm-history .empty i { font-size: 28px; }
.utm-hist {
  display: block; width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm); background: none;
  text-align: left; cursor: pointer;
}
.utm-hist:hover { background: var(--surface-hover); }
.utm-hist__title { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utm-hist__meta { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }