/* 7K Casino — "chat" template · весь лендинг как переписка в чате поддержки */
:root{
  --acc:#ff7a4d;        /* оператор / брендовый акцент */
  --acc2:#2fd6c6;       /* mint — статусы, галочки прочтения */
  --bg:#e7ecf4;         /* фон чата */
  --bg2:#dde4ef;        /* второй тон обоев */
  --panel:#ffffff;      /* пузырь оператора / панели */
  --me:#e8e3ff;         /* пузырь пользователя */
  --ink:#1d2233;        /* основной текст */
  --mut:#6b7385;        /* приглушённый */
  --line:#e2e7f0;       /* границы */
  --rad:20px;
  --soft:0 6px 24px rgba(29,34,51,.09);
  --soft2:0 2px 8px rgba(29,34,51,.06);
  --qs:"Quicksand",system-ui,Arial,sans-serif;
  --ui:"Inter",system-ui,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(circle at 12% 18%,rgba(108,92,231,.06),transparent 42%),
    radial-gradient(circle at 88% 82%,rgba(18,184,134,.06),transparent 42%),
    radial-gradient(rgba(29,34,51,.035) 1px,transparent 1px);
  background-size:auto,auto,22px 22px;
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--qs);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(25px,4.4vw,40px)}
h2{font-size:clamp(20px,2.8vw,27px)}
h3{font-size:clamp(16px,1.8vw,19px)}
h4{font-size:15px;font-weight:600}
p{margin:0 0 .85em}
a{color:inherit;text-decoration:none}
.bb{font-weight:700;color:var(--acc)}
.chmint{color:var(--acc2);font-weight:700}
.chskip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:999;border-radius:8px}
.chskip:focus{left:10px;top:10px}
.chwrap{max-width:820px;margin:0 auto;padding:0 16px}

/* ---------- Top bar (шапка чата) ---------- */
.chbar{
  position:sticky;top:0;z-index:40;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  box-shadow:var(--soft2);
}
.chbar__in{
  max-width:820px;margin:0 auto;padding:9px 16px;
  display:flex;align-items:center;gap:12px;
}
.chbrand{display:flex;align-items:center;gap:11px;min-width:0}
.chbrand__av{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),#8f7bff);
  display:grid;place-items:center;color:#fff;font-family:var(--qs);font-weight:700;font-size:17px;
  box-shadow:0 3px 10px rgba(108,92,231,.4);position:relative;
}
.chbrand__av::after{
  content:"";position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;
  background:var(--acc2);border:2px solid var(--panel);
}
.chbrand__t{display:flex;flex-direction:column;min-width:0}
.chbrand__nm{font-family:var(--qs);font-weight:700;font-size:16px}
.chbrand__t small{color:var(--acc2);font-size:12px;display:flex;align-items:center;gap:5px}
.chbrand__t small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc2)}
.chbar__sp{flex:1}
.chbtn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--qs);font-weight:700;
  padding:11px 20px;border-radius:999px;cursor:pointer;border:0;font-size:15px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.chbtn--go{background:linear-gradient(135deg,var(--acc),#8f7bff);color:#fff;box-shadow:0 4px 14px rgba(108,92,231,.38)}
.chbtn--go:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(108,92,231,.48)}
.chbtn--sm{padding:9px 16px;font-size:14px}
.chbtn--ghost{background:#fff;color:var(--acc);border:1.5px solid var(--acc)}
.chbtn--ghost:hover{background:var(--me)}
.chbtn--block{width:100%;justify-content:center}

/* ---------- Chat feed ---------- */
.chfeed{padding:22px 0 130px}
.chday{
  text-align:center;margin:6px 0 20px;
}
.chday span{
  display:inline-block;background:rgba(29,34,51,.08);color:var(--mut);
  font-size:12px;font-weight:600;padding:4px 14px;border-radius:999px;
}
.chrow{display:flex;gap:10px;margin:0 0 16px;align-items:flex-end}
.chrow--me{flex-direction:row-reverse}
.chav{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),#8f7bff);
  display:grid;place-items:center;color:#fff;font-family:var(--qs);font-weight:700;font-size:13px;
  margin-bottom:20px;
}
.chav--me{background:linear-gradient(135deg,#3c4864,#5a6a8c)}
.chside{max-width:88%;min-width:0;display:flex;flex-direction:column}
.chrow--me .chside{align-items:flex-end}

.chbub{
  position:relative;background:var(--panel);border-radius:var(--rad);
  border-top-left-radius:6px;padding:15px 18px;box-shadow:var(--soft2);
  border:1px solid var(--line);
}
.chbub--me{
  background:var(--me);border-top-left-radius:var(--rad);border-top-right-radius:6px;
  border-color:#d6ccff;
}
.chbub--wide{width:100%}
.chname{font-family:var(--qs);font-weight:700;font-size:13px;color:var(--acc);margin:0 0 6px}
.chrow--me .chname{color:#3c4864}
.chbub p:last-child{margin-bottom:0}

.chmeta{display:flex;align-items:center;gap:5px;margin:5px 4px 0;font-size:11px;color:var(--mut)}
.chrow--me .chmeta{justify-content:flex-end}
.chtick{color:var(--acc2);font-weight:700;letter-spacing:-3px;font-size:13px}

/* typing indicator */
.chtyping{display:inline-flex;align-items:center;gap:5px;padding:14px 18px}
.chtyping i{width:8px;height:8px;border-radius:50%;background:var(--mut);opacity:.5;animation:chblink 1.3s infinite ease-in-out}
.chtyping i:nth-child(2){animation-delay:.18s}
.chtyping i:nth-child(3){animation-delay:.36s}
@keyframes chblink{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.chtyping-lbl{font-size:12px;color:var(--mut);margin:2px 0 0 4px}

/* ---------- Hero content inside bubble ---------- */
.chhero h1{margin-top:2px}
.chhero .chlead{color:var(--mut);font-size:15px}
.chhero__btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.chkpi{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;
}
.chkpi > div{
  background:linear-gradient(160deg,#f4f2ff,#eef4ff);border:1px solid var(--line);
  border-radius:14px;padding:12px 10px;text-align:center;
}
.chkpi .fig{display:block;font-family:var(--qs);font-weight:700;font-size:clamp(18px,3vw,24px);color:var(--acc)}
.chkpi small{display:block;font-size:11px;color:var(--mut);margin-top:3px}

/* section lead line above operator answers */
.chlead{margin:0 0 .85em}

/* ---------- Welcome pack (mini-cards) ---------- */
.chpack{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.chpack__c{
  background:linear-gradient(165deg,#faf9ff,#f1f4ff);border:1px solid var(--line);
  border-radius:16px;padding:15px 14px;position:relative;overflow:hidden;
}
.chpack__c::before{content:"";position:absolute;inset:0 auto auto 0;height:4px;width:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.chpack__pct{font-family:var(--qs);font-weight:700;font-size:26px;color:var(--acc);line-height:1}
.chpack__cap{font-weight:600;font-size:14px;margin:6px 0 4px}
.chpack__c p{font-size:12.5px;color:var(--mut);margin:0}
.chpack__tag{display:inline-block;margin-top:9px;font-size:11px;font-weight:600;color:var(--acc2);background:rgba(18,184,134,.1);padding:3px 9px;border-radius:999px}

/* ---------- Catalogue ---------- */
.chcat{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:6px}
.chslot{
  display:flex;align-items:center;gap:12px;background:#fafbff;border:1px solid var(--line);
  border-radius:14px;padding:11px 13px;
}
.chslot__ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,var(--acc),#8f7bff);
  display:grid;place-items:center;color:#fff;font-family:var(--qs);font-weight:700;font-size:15px;
}
.chslot__b{min-width:0}
.chslot__n{font-family:var(--qs);font-weight:700;font-size:14.5px;line-height:1.2}
.chslot__p{font-size:12px;color:var(--mut);margin:2px 0 0}
.chslot__rtp{font-size:11.5px;color:var(--acc2);font-weight:600;margin-top:2px}

/* ---------- VIP ladder ---------- */
.chvip{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.chvip__r{
  display:flex;align-items:center;gap:12px;background:#fafbff;border:1px solid var(--line);
  border-radius:13px;padding:10px 14px;
}
.chvip__n{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--me);color:var(--acc);
  display:grid;place-items:center;font-family:var(--qs);font-weight:700;font-size:14px;
}
.chvip__name{font-family:var(--qs);font-weight:700;font-size:15px;flex:1}
.chvip__req{font-size:12px;color:var(--mut);flex:1;text-align:right}
.chvip__cb{
  flex:0 0 auto;font-family:var(--qs);font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--acc2));padding:4px 12px;border-radius:999px;min-width:58px;text-align:center;
}

/* ---------- Live tables ---------- */
.chlive{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:6px}
.chlive__c{
  background:#0f1424;color:#eef1f8;border-radius:15px;padding:14px 13px;position:relative;overflow:hidden;
}
.chlive__c::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.chlive__tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#ff6b6b;text-transform:uppercase;letter-spacing:.5px}
.chlive__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.25)}
.chlive__n{font-family:var(--qs);font-weight:700;font-size:16px;margin:8px 0 3px}
.chlive__s{font-size:12px;color:#9aa4bd;margin:0}
.chlive__m{font-size:12.5px;color:var(--acc2);font-weight:600;margin:8px 0 0}

/* ---------- Cashier table ---------- */
.chpaywrap{overflow-x:auto;margin-top:6px;border-radius:14px;border:1px solid var(--line)}
.chpay{width:100%;border-collapse:collapse;font-size:13.5px;min-width:460px;background:#fafbff}
.chpay th,.chpay td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.chpay thead th{background:var(--me);font-family:var(--qs);font-weight:700;color:var(--acc);font-size:12.5px}
.chpay tbody tr:last-child td{border-bottom:0}
.chpay td:first-child{font-weight:600}
.chpay .fee{color:var(--acc2);font-weight:700}

/* ---------- FAQ (as accordion messages) ---------- */
.chfaq{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.chfaq details{background:#fafbff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.chfaq summary{
  cursor:pointer;list-style:none;padding:12px 15px;font-family:var(--qs);font-weight:600;font-size:14.5px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.chfaq summary::-webkit-details-marker{display:none}
.chfaq summary::after{content:"+";color:var(--acc);font-weight:700;font-size:20px;line-height:1}
.chfaq details[open] summary::after{content:"−"}
.chfaq details p{padding:0 15px 13px;margin:0;font-size:13.5px;color:var(--mut)}

/* ---------- Author note & 18+ ---------- */
.chnote{background:#fff8ec;border-color:#f2e2c2}
.chnote .chname{color:#b5852a}
.cheighteen{
  display:inline-block;background:#d64545;color:#fff;font-family:var(--qs);font-weight:700;
  font-size:12px;padding:2px 9px;border-radius:7px;margin-right:6px;
}
.chbadge{
  display:inline-flex;align-items:center;gap:6px;background:var(--me);color:var(--acc);
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;margin-top:8px;
}

/* ---------- Compose bar (декоративное поле ввода) ---------- */
.chcompose{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(29,34,51,.07);
}
.chcompose__in{
  max-width:820px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px;
}
.chcompose__field{
  flex:1;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:12px 18px;color:var(--mut);font-size:14px;user-select:none;
}
.chcompose__send{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--acc),#8f7bff);color:#fff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(108,92,231,.4);
}
.chcompose__send svg{width:20px;height:20px}

/* ---------- Footer ---------- */
.chfoot{background:#12172a;color:#c3cbe0;padding:36px 0 90px}
.chfoot .chwrap{max-width:820px}
.chfoot__top{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.chfoot__brand{flex:1;min-width:240px}
.chfoot__logo{display:flex;align-items:center;gap:10px;font-family:var(--qs);font-weight:700;font-size:18px;color:#fff;margin-bottom:10px}
.chfoot__logo .chbrand__av{width:38px;height:38px;font-size:15px}
.chfoot__logo .chbrand__av::after{display:none}
.chfoot__legal{font-size:12.5px;color:#8b95b3;line-height:1.65}
.chfoot__legal .bb{color:#c3cbe0}
.chfoot__cols{display:flex;gap:30px;flex-wrap:wrap}
.chfoot__col h4{color:#fff;font-family:var(--qs);margin:0 0 9px}
.chfoot__col ul{list-style:none;margin:0;padding:0}
.chfoot__col li{font-size:13px;color:#8b95b3;padding:3px 0}
.chfoot__badges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.chfoot__badges span{font-size:11.5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#c3cbe0;padding:5px 12px;border-radius:999px}
.chfoot__bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:24px;padding-top:18px;display:flex;flex-direction:column;gap:8px}
.chfoot__bottom span{font-size:12px;color:#79839f}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .chkpi{grid-template-columns:repeat(2,1fr)}
  .chpack{grid-template-columns:1fr}
  .chcat{grid-template-columns:1fr}
  .chlive{grid-template-columns:1fr}
  .chside{max-width:92%}
  .chvip__req{display:none}
  .chbrand__t small{font-size:11px}
}
@media(max-width:400px){
  .chbar__in{padding:8px 12px}
  .chbtn{padding:9px 14px;font-size:14px}
}