/* ZAHODY — чат міста: кнопка 💬, прев'ю, вікно. Комп'ютер — вікно ліворуч під кнопками; телефон — панель знизу над клавіатурою. */
#lv-chat{left:12px;top:184px;font-size:22px;padding:0}
#lv-chat .lv-ic{display:block;line-height:52px}
#lv-chat .lv-cnt{position:absolute;right:-4px;top:-4px;min-width:20px;height:20px;border-radius:10px;background:#e0503a;color:#fff;font-size:12px;line-height:20px;font-weight:800;padding:0 5px;box-sizing:border-box;box-shadow:0 0 0 2px #fff}
#lv-chat .lv-cnt:empty{display:none}
#lv-chat.on{background:#1f2a33}
#lv-chat.lv-off .lv-ic{opacity:.5}
#menu #lv-chat{position:relative;left:auto;top:auto;width:auto;height:auto;min-width:46px;min-height:34px;font-size:18px;padding:0 6px;border-radius:10px;box-shadow:none;background:#eef0f2;display:flex;align-items:center;justify-content:center}
#menu #lv-chat .lv-ic{line-height:30px}

/* прев'ю нового повідомлення біля кнопки */
#ch-peek{position:fixed;z-index:14;left:76px;top:210px;transform:translate(-6px,-50%);opacity:0;visibility:hidden;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;max-width:min(300px,calc(100vw - 100px));padding:8px 13px 9px;border:0;border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.97);color:#1f2a33;box-shadow:0 6px 20px rgba(20,30,40,.22);font:500 14px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left;cursor:pointer;
  transition:opacity .2s ease,transform .2s ease,visibility 0s .2s;-webkit-tap-highlight-color:transparent}
#ch-peek b{font-size:12px;font-weight:800}
#ch-peek span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
#ch-peek.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%);transition:opacity .2s ease,transform .2s ease}
#ch-peek.below{transform:translate(-50%,-6px);border-radius:14px}
#ch-peek.below.show{transform:translate(-50%,0)}

/* вікно */
#ch{--ch-bg:rgba(250,251,252,.97);--ch-ink:#1f2a33;--ch-mut:#7b8792;--ch-line:#e6eaed;--ch-acc:#1f2a33;--ch-ok:#38c7a4;
  position:fixed;z-index:19;left:76px;top:60px;width:min(380px,calc(100vw - 100px));height:min(560px,calc(100% - 80px - var(--eb,0px)));
  display:flex;flex-direction:column;background:var(--ch-bg);color:var(--ch-ink);border-radius:22px;
  box-shadow:0 18px 50px rgba(20,30,40,.28),0 2px 6px rgba(20,30,40,.12);overflow:hidden;
  font:15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:0 0;transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#ch.show{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
#ch button{font:inherit;-webkit-tap-highlight-color:transparent}
body.map #ch,body.styling #ch,body.map #lv-chat,body.styling #lv-chat,body.map #ch-peek,body.styling #ch-peek,body.acc-open #ch{display:none!important}

.ch-head{display:flex;align-items:center;gap:4px;padding:12px 8px 10px 18px;border-bottom:1px solid var(--ch-line);background:linear-gradient(180deg,#fff,rgba(255,255,255,.6))}
.ch-title{flex:1;display:flex;flex-direction:column;min-width:0}
.ch-title b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.ch-on{font-size:12px;color:var(--ch-mut);display:flex;align-items:center;gap:6px}
.ch-on::before{content:"";width:8px;height:8px;border-radius:50%;background:#c3cbd1}
.ch-on.ok::before{background:var(--ch-ok);box-shadow:0 0 0 3px rgba(56,199,164,.22)}
.ch-ic{width:40px;height:40px;border:0;border-radius:12px;background:none;color:#8a949c;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1}
.ch-ic:hover{background:#eef1f3;color:var(--ch-ink)}
.ch-ic svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.ch-opts{padding:10px 16px 12px;border-bottom:1px solid var(--ch-line);background:#f4f6f7}
.ch-opts[hidden]{display:none}
.ch-opt-l{font-size:11px;font-weight:800;color:#5b6670;text-transform:uppercase;letter-spacing:.05em;margin:2px 0 7px}
.ch-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ch-chip{border:1.5px solid #cfd5da;background:#fff;color:var(--ch-ink);border-radius:20px;min-height:36px;padding:6px 13px;font-size:14px!important;font-weight:600;cursor:pointer}
.ch-chip.on{background:var(--ch-acc);border-color:var(--ch-acc);color:#fff}
.ch-wide{width:100%}
.ch-opt-n{margin:8px 0 0;font-size:12px;color:#5b6670}

.ch-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px 6px;display:flex;flex-direction:column;gap:2px;scroll-behavior:auto}
.ch-empty{margin:auto;text-align:center;color:var(--ch-mut);padding:18px 20px;max-width:280px}
.ch-empty b{display:block;color:var(--ch-ink);font-size:16px;margin:6px 0 6px}
.ch-empty p{margin:0 0 6px;font-size:13px}
.ch-empty-ic{font-size:38px}
.ch-empty-mic{color:#2d5d8a}

.ch-m{display:flex;flex-direction:column;align-items:flex-start;max-width:86%;margin-top:8px;animation:chin .16s ease-out}
.ch-m.cont{margin-top:2px}
.ch-m.me{align-self:flex-end;align-items:flex-end}
.ch-who{display:flex;align-items:baseline;gap:7px;padding:0 6px 3px;font-size:12px;color:var(--ch-mut)}
.ch-name{border:0;background:none;padding:0;font-weight:800!important;font-size:13px!important;cursor:pointer;color:var(--ch-ink)}
span.ch-name{cursor:default}
.ch-name:hover{text-decoration:underline}
.ch-near{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#2f9e5a;background:#e3f5ea;border-radius:6px;padding:1px 5px}
.ch-b{background:#fff;border:1px solid var(--ch-line);border-radius:6px 18px 18px 18px;padding:8px 13px 9px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;box-shadow:0 1px 2px rgba(20,30,40,.05);cursor:pointer}
.ch-m.cont .ch-b{border-radius:18px}
.ch-m.me .ch-b{background:var(--ch-acc);border-color:var(--ch-acc);color:#fff;border-radius:18px 6px 18px 18px;cursor:default}
.ch-m.me.cont .ch-b{border-radius:18px}
@keyframes chin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ch-new{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);border:0;border-radius:18px;background:var(--ch-acc);color:#fff;font-size:13px!important;font-weight:700;padding:8px 14px;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.ch-new[hidden]{display:none}

.ch-menu{margin:0 10px 8px;padding:12px;background:#fff;border:1px solid var(--ch-line);border-radius:16px;box-shadow:0 8px 24px rgba(20,30,40,.16)}
.ch-menu[hidden]{display:none}
.ch-menu-h{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.ch-menu-h span{font-size:13px;color:var(--ch-mut);overflow-wrap:anywhere}
.ch-menu-row{display:flex;flex-wrap:wrap;gap:6px}
.ch-menu-l{width:100%;font-size:12px;font-weight:800;color:#5b6670;text-transform:uppercase;letter-spacing:.04em}
.ch-act{border:0;border-radius:12px;background:#eef1f3;color:var(--ch-ink);min-height:40px;padding:8px 12px;font-size:14px!important;font-weight:700;cursor:pointer}
.ch-act.ch-warn{background:#fff1ec;color:#b2401f}
.ch-act.ch-plain{background:none;color:#5b6670;font-weight:600}

.ch-form{display:flex;align-items:center;gap:6px;padding:8px 10px 8px;border-top:1px solid var(--ch-line);background:#fff}
.ch-in{flex:1;min-width:0;height:44px;border:1.5px solid #d6dce0;border-radius:22px;padding:0 16px;font:16px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ch-ink);background:#f7f9fa;outline:none;transition:border-color .15s,background .15s}
.ch-in:focus{border-color:#8fa3b2;background:#fff}
.ch-in:disabled{opacity:.6}
.ch-mic,.ch-send{flex:none;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}
.ch-mic{background:#eef1f3;color:#1f2a33}
.ch-mic svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ch-mic svg rect{stroke:none}
.ch-mic.on{background:#e0503a;color:#fff;animation:chmic 1.2s ease-in-out infinite}
@keyframes chmic{0%,100%{box-shadow:0 0 0 0 rgba(224,80,58,.45)}50%{box-shadow:0 0 0 8px rgba(224,80,58,0)}}
.ch-send{background:var(--ch-acc);color:#fff}
.ch-send svg{width:20px;height:20px;fill:currentColor;margin-left:2px}
.ch-send:disabled{background:#d8dee2;cursor:default}
.ch-mic:active,.ch-send:not(:disabled):active{transform:scale(.93)}
#ch.listening .ch-in{border-color:#e0503a}
.ch-hint{min-height:0;padding:0 18px;font-size:12px;color:var(--ch-mut);background:#fff;text-align:right}
.ch-hint:not(:empty){padding:0 18px 8px}
.ch-hint.bad{color:#b2401f}

/* підпис над головою: повідомлення чату — у кілька рядків */
.lv-bub.lv-chatb{white-space:normal;max-width:240px;text-align:center;font-weight:600;font-size:14px;line-height:1.25;overflow-wrap:anywhere}

/* телефон і вузький екран: панель знизу на всю ширину, над клавіатурою */
@media (max-width:700px),(pointer:coarse) and (max-width:1000px){
  #ch{left:0;right:0;top:auto;bottom:var(--kb,0px);width:100%;height:min(66vh,calc(var(--vvh,100vh) - 40px));border-radius:22px 22px 0 0;transform-origin:50% 100%;transform:translateY(24px)}
  #ch.show{transform:none}
  .ch-form{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}
/* телефон боком: панель праворуч на всю висоту (клавіатура займає низ — список стискається) */
@media (pointer:coarse) and (max-height:520px) and (orientation:landscape){
  #ch{left:auto;right:0;top:0;bottom:var(--kb,0px);width:min(420px,58vw);height:auto;max-height:none;border-radius:22px 0 0 22px}
}

/* кімнати готових фраз (до 18, гості й без акаунта): замість поля вводу — фрази (chat-ui.js, docs/SAFETY-API.md) */
.ch-phr{padding:8px 10px 10px;border-top:1px solid var(--ch-line);background:#fff}
.ch-phr[hidden],.ch-form[hidden]{display:none}
.ch-phr-n{font-size:12px;color:#5d6a73;margin:0 2px 6px;line-height:1.3}
.ch-phr-list{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow:auto}
.ch-phr .ch-ph{min-height:36px;padding:6px 12px;font-size:14px}