/* ---- TG-прокладка: светлая тема Telegram ---- */
:root{
  --header:#527da3;
  --header2:#5b87ad;
  --chat:#d9e3ea;
  --bubble:#ffffff;
  --txt:#0f1a24;
  --time:#8aa0ad;
  --cta:#3390ec;
  --cta2:#2b7fd6;
  --badge:#4fb0ff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font:16px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  background:#000;
}
.tg{
  max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;position:relative;
  background:var(--chat);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 45%, rgba(255,255,255,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.30) 0 2px, transparent 3px),
    linear-gradient(160deg,#dfe7ed,#cdd9e2);
  background-size:140px 140px,180px 180px,160px 160px,100% 100%;
  box-shadow:0 0 40px rgba(0,0,0,.5);
}

/* Шапка */
.tg-head{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;
  background:linear-gradient(180deg,var(--header),var(--header2));
  color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.tg-back,.tg-menu{
  background:none;border:0;color:#fff;font-size:26px;line-height:1;
  padding:4px 6px;cursor:pointer;opacity:.95;
}
.tg-menu{font-size:22px}
.tg-ava{
  width:40px;height:40px;border-radius:50%;flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:16px;color:#fff;letter-spacing:.5px;
  background:linear-gradient(135deg,#ffb15c,#ff6f91);
}
.tg-id{flex:1;min-width:0}
.tg-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--badge);
  color:#fff;font-size:10px;font-weight:700;flex:0 0 16px;
}
.tg-sub{font-size:13px;opacity:.85;margin-top:1px}

/* Чат */
.tg-chat{
  flex:1;padding:14px 12px 20px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
}
.tg-date{display:flex;justify-content:center;margin:4px 0 8px}
.tg-date span{
  background:rgba(43,70,92,.45);color:#fff;font-size:12.5px;font-weight:500;
  padding:4px 11px;border-radius:14px;
}
.msg{display:flex;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.msg.show{opacity:1;transform:none}
.bubble{
  position:relative;background:var(--bubble);
  border-radius:14px;border-top-left-radius:4px;
  padding:8px 11px 20px;max-width:82%;
  font-size:15.5px;line-height:1.42;color:var(--txt);
  box-shadow:0 1px 1px rgba(0,0,0,.12);
  word-wrap:break-word;
}
.bubble .time{
  position:absolute;right:10px;bottom:5px;
  font-size:11px;color:var(--time);
}
.bubble--typing{display:inline-flex;gap:4px;padding:14px 14px}
.bubble--typing span{
  width:7px;height:7px;border-radius:50%;background:#9fb3c0;
  animation:blink 1.2s infinite ease-in-out;
}
.bubble--typing span:nth-child(2){animation-delay:.2s}
.bubble--typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* Футер с кнопкой */
.tg-foot{
  position:sticky;bottom:0;z-index:5;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(217,227,234,0),#cfdae2 40%);
}
.tg-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:15px 18px;border-radius:14px;
  background:linear-gradient(180deg,var(--cta),var(--cta2));
  color:#fff;font-size:17px;font-weight:600;text-decoration:none;
  box-shadow:0 4px 14px rgba(51,144,236,.4);
  transition:transform .08s ease, filter .15s ease;
}
.tg-cta:active{transform:scale(.985);filter:brightness(.96)}
.tg-cta__ico{font-size:19px}
.tg-foot__hint{text-align:center;font-size:12px;color:#5b6f7c;margin-top:8px}
.tg-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:7px}
.tg-legal a{font-size:11.5px;color:#64788a;text-decoration:none}
.tg-legal a:hover{text-decoration:underline}

/* Cookie-уведомление */
.tg-cookie{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
  width:calc(100% - 24px);max-width:456px;z-index:20;
  display:flex;align-items:center;gap:12px;
  background:#1c2b38;color:#e9eef2;
  border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.4;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.tg-cookie a{color:#6cb6ff}
.tg-cookie button{
  flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;
  background:var(--cta);color:#fff;font-weight:600;font-size:13px;padding:9px 16px;
}