/* Витрина калькуляторов /web/calculator (components/calc/CalcGallery.tsx).
   Здесь только рамка витрины и превью Telegram; каждый калькулятор
   стилизуется своим файлом public/pages/calc/<id>.css под своим корнем. */

.cg { margin-top: 36px; }

.cg-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.cg-tabs::-webkit-scrollbar { display: none; }
.cg-tabs button {
  flex: none; display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px 14px; background: none; border: 0; cursor: pointer;
  font: 500 0.95rem/1.2 var(--font-onest, inherit); color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.cg-tabs button:hover { color: var(--text); }
.cg-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--yellow); }
.cg-tab-n { font-size: 0.72rem; font-variant-numeric: tabular-nums; opacity: .6; }

.cg-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cg-stage {
  border-radius: 20px; overflow: hidden; min-height: 560px;
  border: 1px solid var(--border); background: var(--bg-card);
}

/* ── превью заявки в Telegram ── */
.cg-tg {
  position: sticky; top: 96px;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--border);
  background: #fff; color: #0f1419; font-family: var(--font-onest, system-ui, sans-serif);
}
.cg-tg-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e6e9ec; }
.cg-tg-top b { display: block; font-size: .92rem; }
.cg-tg-top span { font-size: .78rem; color: #6b7a87; }
.cg-tg-ava {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #2aabee; color: #fff; font-weight: 700;
}
.cg-tg-chat { min-height: 300px; padding: 18px 14px; background: #d9e4cf; display: flex; align-items: flex-end; }
.cg-tg-msg {
  max-width: 100%; background: #fff; border-radius: 14px 14px 14px 4px; padding: 10px 12px 6px;
  font-size: .86rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.08);
  opacity: .62; transition: opacity .25s;
}
.cg-tg-msg.is-sent { opacity: 1; animation: cg-pop .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cg-pop { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.cg-tg-title { font-weight: 700; margin-bottom: 4px; }
.cg-tg-line span { color: #6b7a87; }
.cg-tg-total { font-weight: 700; margin-top: 4px; }
.cg-tg-contact { margin-top: 4px; }
.cg-tg-meta { text-align: right; font-size: .72rem; color: #6b7a87; margin-top: 2px; }
.cg-tg-msg.is-sent .cg-tg-meta { color: #4fae4e; }
.cg-tg-note { margin: 0; padding: 12px 16px 16px; font-size: .82rem; line-height: 1.5; color: #4a5560; }

.cg-foot { margin: 14px 0 0; font-size: .82rem; color: var(--text-muted); }

@media (max-width: 960px) {
  .cg-body { grid-template-columns: 1fr; }
  .cg-tg { position: static; }
  .cg-tg-chat { min-height: 0; }
  .cg-stage { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-tg-msg.is-sent { animation: none; }
}