/* «Лис» — окно чата на сайте. Токены цвета и шрифтов берём у сайта (:root в main.css),
   здесь только запасные значения. */
#lisRoot{--lis-ink:var(--ink,#101418);--lis-ink2:var(--ink2,#3a4148);--lis-muted:var(--muted2,#6b7178);
  --lis-orange:var(--orange,#df6c4f);--lis-beige:var(--beige,#f5f3ef);--lis-white:#fff;--lis-closed:var(--closed,#e5484d);
  --lis-head:var(--f-head,"Onest","Helvetica Neue",sans-serif);--lis-body:var(--f-body,"Rubik",Arial,sans-serif);
  --lis-mono:var(--f-mono,"Space Mono","PT Mono",Menlo,monospace);--lis-ease:var(--ease-out,cubic-bezier(.23,1,.32,1));
  font-family:var(--lis-body);color:var(--lis-ink)}
#lisRoot *,#lisRoot *::before,#lisRoot *::after{box-sizing:border-box}
/* :where — без веса селектора, иначе сбрасывает цвета наведения у кнопок */
:where(#lisRoot) button{font:inherit;color:inherit}
#lisRoot svg{display:block}

/* Плавающая кнопка */
#lisFab{position:fixed;right:24px;bottom:24px;z-index:150;display:flex;align-items:center;gap:10px;height:56px;padding:0 18px 0 8px;
  background:var(--lis-orange);color:var(--lis-ink);border:2px solid var(--lis-ink);box-shadow:4px 4px 0 var(--lis-ink);cursor:pointer;
  font-family:var(--lis-head);font-weight:700;font-size:16px;letter-spacing:.6px;text-transform:uppercase;
  transition:transform .16s var(--lis-ease),box-shadow .16s var(--lis-ease)}
#lisFab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--lis-ink)}
#lisFab:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--lis-ink)}
#lisFab:focus-visible{outline:3px solid var(--lis-ink);outline-offset:4px}
.lis-fab-ava{display:grid;place-items:center;width:38px;height:38px;background:var(--lis-ink)}
.lis-fab-ava svg{width:24px;height:30px}
#lisRoot.open #lisFab{display:none}

/* Панель */
#lisPanel{position:fixed;right:24px;bottom:24px;z-index:150;display:none;flex-direction:column;overflow:hidden;
  width:min(420px,calc(100vw - 48px));height:min(660px,calc(100dvh - 48px));
  background:var(--lis-beige);border:2px solid var(--lis-ink);box-shadow:8px 8px 0 var(--lis-ink);transform-origin:bottom right}
#lisPanel.show{display:flex;animation:lisOpen .26s var(--lis-ease)}
#lisPanel.hide{display:flex;animation:lisClose .16s ease-in forwards}
@keyframes lisOpen{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes lisClose{to{opacity:0;transform:translateY(16px) scale(.97)}}

/* Шапка */
.lis-head{display:flex;align-items:center;gap:12px;padding:12px 10px 12px 14px;background:var(--lis-ink);color:#fff}
.lis-ava{display:grid;place-items:center;flex:none;width:42px;height:42px;border:2px solid var(--lis-orange)}
.lis-ava svg{width:24px;height:30px}
.lis-htext{display:flex;flex-direction:column;gap:3px;min-width:0}
.lis-title{font-family:var(--lis-head);font-weight:800;font-size:18px;line-height:1;letter-spacing:.4px;text-transform:uppercase}
.lis-sub{font-family:var(--lis-mono);font-size:11px;line-height:1.2;color:#b9bdc1;text-transform:uppercase;letter-spacing:.4px}
.lis-sp{flex:1}
.lis-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;color:#fff}
.lis-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square}
.lis-ico:hover{background:#2a3038}
.lis-ico:focus-visible{outline:2px solid var(--lis-orange);outline-offset:-2px}
.lis-ico:disabled{opacity:.4;cursor:default;background:transparent}

/* Лента */
.lis-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.lis-body:focus{outline:none}
.lis-row{display:flex;gap:8px;align-items:flex-end;animation:lisIn .28s var(--lis-ease)}
.lis-row.user{justify-content:flex-end}
@keyframes lisIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lis-dot{display:grid;place-items:center;flex:none;width:28px;height:28px;background:var(--lis-ink)}
.lis-dot svg{width:16px;height:20px}
.lis-msg{max-width:84%;padding:10px 12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.lis-msg.bot{background:var(--lis-white);border:2px solid var(--lis-ink)}
.lis-msg.user{background:var(--lis-ink);color:#fff}
.lis-msg p{margin:0 0 6px}
.lis-msg>p:last-of-type{margin-bottom:0}
.lis-msg .lis-h{font-family:var(--lis-head);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.3px}
.lis-msg ul,.lis-msg ol{margin:4px 0 6px;padding-left:20px}
.lis-msg ul{list-style:square}
.lis-msg li::marker{color:var(--lis-orange)}
.lis-msg strong{font-weight:600}
.lis-msg p:has(> strong:only-child){margin:10px 0 2px}
.lis-msg>p:first-child:has(> strong:only-child){margin-top:0}
.lis-msg ul,.lis-msg ol{margin-bottom:8px}
.lis-msg li{margin:3px 0}
.lis-price{font-weight:600;white-space:nowrap}
.lis-msg .lis-note{margin-top:8px;padding-top:6px;border-top:1px solid #e3e0da;color:var(--lis-ink2);font-size:13px}
.lis-msg ul+.lis-note,.lis-msg p+.lis-note{margin-top:8px}
.lis-msg code{font-family:var(--lis-mono);font-size:.9em}
.lis-msg a{color:inherit;text-decoration:underline;text-decoration-color:var(--lis-orange);text-decoration-thickness:2px;text-underline-offset:2px}
.lis-msg a.lis-tel{white-space:nowrap}
.lis-error{color:var(--lis-ink)}
.lis-msg.bot:has(.lis-error){border-color:var(--lis-closed)}
.lis-actions{display:flex;gap:8px;margin-top:8px;padding-top:6px;border-top:1px solid #e3e0da}
.lis-actions button{border:0;background:none;padding:2px 0;cursor:pointer;font-family:var(--lis-mono);font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--lis-muted)}
.lis-actions button:hover{color:var(--lis-ink);text-decoration:underline}

/* Ожидание */
.lis-msg.lis-pending{display:flex;align-items:center;padding:14px 14px}
.lis-typing{display:flex;gap:4px}
.lis-typing i{width:7px;height:7px;background:var(--lis-orange);animation:lisBounce 1.2s infinite}
.lis-typing i:nth-child(2){animation-delay:.15s}.lis-typing i:nth-child(3){animation-delay:.3s}
@keyframes lisBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* Приветствие */
.lis-welcome{display:grid;gap:12px;padding:14px;background:var(--lis-white);border:2px solid var(--lis-ink);box-shadow:4px 4px 0 var(--lis-ink);animation:lisIn .28s var(--lis-ease)}
.lis-welcome-top{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center}
.lis-welcome-mark{display:grid;place-items:center;width:40px;height:40px;background:var(--lis-ink)}
.lis-welcome-mark svg{width:22px;height:28px}
.lis-welcome-top span{display:grid;gap:2px}
.lis-welcome-top small{font-family:var(--lis-mono);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--lis-orange)}
.lis-welcome-top b{font-family:var(--lis-head);font-weight:800;font-size:20px;line-height:1.1;text-transform:uppercase}
.lis-welcome>p{margin:0;font-size:14px;line-height:1.5;color:var(--lis-ink2)}
.lis-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lis-card{display:grid;gap:2px;padding:10px;text-align:left;cursor:pointer;background:var(--lis-beige);border:2px solid var(--lis-ink);
  transition:transform .14s var(--lis-ease),box-shadow .14s var(--lis-ease)}
.lis-card:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--lis-ink)}
.lis-card:focus-visible{outline:3px solid var(--lis-orange);outline-offset:2px}
.lis-card b{font-family:var(--lis-head);font-weight:700;font-size:14px;text-transform:uppercase}
.lis-card small{font-size:12px;color:var(--lis-muted)}

/* Подсказки */
.lis-suggest{flex:none;border-top:2px solid var(--lis-ink);background:var(--lis-beige)}
.lis-chips{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:14px}
.lis-chips::-webkit-scrollbar{display:none}
.lis-chips.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.lis-chips.more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.lis-chips.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
/* С мышью — тонкая полоса прокрутки (в macOS видна во время прокрутки) */
@media (hover:hover) and (pointer:fine){
  .lis-chips{scrollbar-width:thin;scrollbar-color:var(--lis-ink) transparent;padding-bottom:6px;scroll-snap-type:none}
  .lis-chips::-webkit-scrollbar{display:block;height:4px}
  .lis-chips::-webkit-scrollbar-thumb{background:var(--lis-ink)}
}
.lis-chip{flex:none;max-width:280px;padding:7px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;scroll-snap-align:start;
  background:var(--lis-white);border:2px solid var(--lis-ink);font-size:13px}
.lis-chip:hover{background:var(--lis-ink);color:#fff}
.lis-chip:focus-visible{outline:3px solid var(--lis-orange);outline-offset:1px}

/* Ввод */
.lis-input{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:8px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));border-top:2px solid var(--lis-ink);background:var(--lis-beige);align-items:end}
.lis-input textarea{display:block;width:100%;min-height:46px;max-height:120px;margin:0;padding:11px 12px;resize:none;
  font:inherit;font-size:15px;line-height:1.4;color:var(--lis-ink);background:var(--lis-white);border:2px solid var(--lis-ink);border-radius:0;outline:none}
.lis-input textarea:focus{box-shadow:3px 3px 0 var(--lis-orange)}
.lis-input textarea::placeholder{color:var(--lis-muted)}
.lis-send{display:grid;place-items:center;width:46px;height:46px;cursor:pointer;background:var(--lis-orange);color:var(--lis-ink);border:2px solid var(--lis-ink)}
.lis-send svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square}
.lis-send:hover{background:var(--lis-ink);color:#fff}
.lis-send:focus-visible{outline:3px solid var(--lis-ink);outline-offset:2px}
.lis-send:disabled{opacity:.45;cursor:default;background:var(--lis-orange);color:var(--lis-ink)}

/* Телефон: кнопка без подписи, чат на весь экран */
@media (max-width:600px){
  #lisFab{right:16px;bottom:16px;height:56px;padding:0 8px}
  .lis-fab-txt{display:none}
  #lisPanel{inset:0;width:100%;height:100dvh;border:0;box-shadow:none}
  #lisPanel.show{animation:lisMobile .22s var(--lis-ease)}
  @keyframes lisMobile{from{opacity:0;transform:translateY(3vh)}to{opacity:1;transform:none}}
  .lis-head{padding:calc(8px + env(safe-area-inset-top)) 6px 8px 12px}
  .lis-body{padding:12px 10px}
  .lis-msg{max-width:88%}
  .lis-chips{padding:8px 10px;scroll-padding-inline:10px}
  .lis-input{padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
  .lis-input textarea{font-size:16px}
}

@media (prefers-reduced-motion: reduce){
  #lisPanel.show,#lisPanel.hide,.lis-row,.lis-welcome,.lis-typing i{animation:none!important}
  #lisFab,.lis-card{transition:none}
}
@media print{#lisRoot{display:none}}