/* =========================================================
   LORKE — онлайн-чат (js/chat.js).
   Кнопка: облачко сообщения из жидкого стекла с логотипом Lorke, который время от времени сменяют
   три «печатающие» точки; пришёл ответ — в облачке число и расходятся волны. Окно чата вырастает из кнопки, сверху — арка.
   Стили самостоятельные: работают и на главной, и на страницах меню.
   ========================================================= */
.lchat {
  --lc-ink: #1c1815; --lc-wood: #241d19; --lc-paper: #f6f1e8; --lc-stone: #ece4d6; --lc-wine: #7a2b2c;
  --lc-brass: #c6a15e; --lc-brass-l: #e4cc93; --lc-cream: #f2e8d3; --lc-ease: cubic-bezier(.22, .8, .2, 1);
  --lc-gap: max(20px, env(safe-area-inset-right));
  font-family: 'Jost', 'Noto Sans Armenian', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lchat [hidden] { display: none !important; }

/* ---------------- кнопка: стеклянное облачко с логотипом ---------------- */
.lchat__fab {
  position: fixed; z-index: 70; right: var(--lc-gap); bottom: max(22px, env(safe-area-inset-bottom));
  width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--lc-cream);
  -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(24px) scale(.9); pointer-events: none;
  transition: opacity .7s var(--lc-ease), transform .7s var(--lc-ease);
}
.lchat.is-in .lchat__fab { opacity: 1; transform: none; pointer-events: auto; }
.lchat.is-open .lchat__fab { opacity: 0; transform: scale(.8); pointer-events: none; transition-duration: .35s; }
html.mnav-open .lchat__fab, body.mnav-open .lchat__fab { opacity: 0; pointer-events: none; }
.lchat__fab:focus-visible { outline: none; }
.lchat__fab:focus-visible .lchat__shape { stroke: var(--lc-brass); stroke-width: 2.5; }
.lchat:not(.is-in) .lchat__fab { visibility: hidden; transition: opacity .7s var(--lc-ease), transform .7s var(--lc-ease), visibility 0s .7s; }

/* облачко — жидкое стекло: страница видна сквозь него, размытая и чуть ярче. Слои: тень только снаружи → стекло
   (размытие и лёгкая дымка) → блики по краю, как у толстого стекла, светлые сверху слева и снизу справа → кольцо и логотип.
   Тон подстраивается под блок за кнопкой (chat.js ставит .is-dark): на светлом логотип и кольцо бордовые,
   на тёмном — кремовые. Форма у всех слоёв одна — путь облачка в квадрате 64×64. Тень короткая: на iPhone Safari
   обрезает всё, что ниже края экрана, ровной линией */
.lchat__body {
  position: absolute; inset: 0; color: var(--lc-wine); transform-origin: 88% 92%;
  transition: transform .5s var(--lc-ease), color .6s;
}
.lchat.is-dark .lchat__body { color: var(--lc-cream); }
.lchat__fab:hover .lchat__body { transform: translateY(-3px); }
.lchat__shd, .lchat__bub, .lchat__waves { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lchat__shd path { fill: rgba(60, 28, 20, .2); transition: fill .6s; }
.lchat.is-dark .lchat__shd path { fill: rgba(0, 0, 0, .38); }
.lchat__glass {
  position: absolute; inset: 0;
  clip-path: path('M56.47 41.41A27 27 0 1 0 46.31 52.90Q52.6 58.6 61 60Q57.4 52.8 56.47 41.41Z');
  background-color: rgba(255, 251, 244, .28);
  -webkit-backdrop-filter: blur(7px) saturate(1.7) brightness(1.06); backdrop-filter: blur(7px) saturate(1.7) brightness(1.06);
  transition: background-color .6s;
}
.lchat.is-dark .lchat__glass { background-color: rgba(255, 240, 214, .1); }
.lchat__fab:hover .lchat__glass { background-color: rgba(255, 251, 244, .5); }
.lchat.is-dark .lchat__fab:hover .lchat__glass { background-color: rgba(255, 240, 214, .17); }
.lchat__gloss { fill: url(#lchatGloss); opacity: .8; }
.lchat__edge { fill: none; stroke: url(#lchatEdge); stroke-width: 5; } /* толщина стекла: свет преломляется у края */
.lchat__shape { fill: none; stroke: url(#lchatRim); stroke-width: 1.1; }
.lchat__ring { fill: none; stroke: currentColor; stroke-opacity: .45; stroke-width: .8; }

/* внутри по очереди: логотип Lorke и три «печатающие» точки — Lorke вам отвечает */
.lchat__mark, .lchat__dots, .lchat__num { position: absolute; left: 50%; top: 46.875%; /* центр круга облачка: (32; 30) из 64 */ transform: translate(-50%, -50%); transition: opacity .4s, transform .4s var(--lc-ease); }
.lchat__mark { width: 22px; height: 29px; fill: currentColor; animation: lc-mark 7s ease-in-out infinite; }
.lchat__mark--txt { width: auto; height: auto; font: italic 400 26px/1 'Cormorant Garamond', serif; }
.lchat__dots { display: flex; gap: 3.5px; opacity: 0; animation: lc-dots 7s ease-in-out infinite; }
.lchat__dots i { width: 5.5px; height: 5.5px; border-radius: 50%; background: currentColor; animation: lc-type 1.2s ease-in-out infinite; }
.lchat__dots i:nth-child(2) { animation-delay: .15s; } .lchat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lc-mark { 0%, 60%, 96%, 100% { opacity: 1; transform: translate(-50%, -50%); } 65%, 91% { opacity: 0; transform: translate(-50%, -50%) scale(.75); } }
@keyframes lc-dots { 0%, 63%, 94%, 100% { opacity: 0; } 68%, 89% { opacity: 1; } }
@keyframes lc-type { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
.lchat__fab:hover .lchat__mark { animation: none; opacity: 0; transform: translate(-50%, -50%) scale(.75); }
.lchat__fab:hover .lchat__dots { animation: none; opacity: 1; }

/* непрочитанное: логотипа нет — в облачке число, стекло наливается цветом (на светлом бордо, на тёмном крем),
   от облачка расходятся волны, и время от времени оно покачивается */
.lchat__num { font: 600 22px/1 'Jost', system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--lc-cream); transition: color .6s; }
.lchat.is-dark .lchat__num { color: var(--lc-wine); }
.lchat__num.is-bump { animation: lc-bump .7s var(--lc-ease); }
@keyframes lc-bump { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 55% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } }
.lchat.has-unread .lchat__mark, .lchat.has-unread .lchat__dots { animation: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.lchat.has-unread .lchat__glass { background-color: rgba(122, 43, 44, .82); }
.lchat.is-dark.has-unread .lchat__glass { background-color: rgba(246, 236, 216, .9); }
.lchat.has-unread .lchat__ring { stroke: var(--lc-cream); }
.lchat.is-dark.has-unread .lchat__ring { stroke: var(--lc-wine); }
.lchat.has-unread .lchat__body { animation: lc-nudge 3.6s ease-in-out infinite; }
@keyframes lc-nudge { 0%, 72%, 100% { rotate: 0deg; } 77% { rotate: -9deg; } 83% { rotate: 6deg; } 89% { rotate: -3deg; } 94% { rotate: 1deg; } }
.lchat__waves path { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.lchat.has-unread .lchat__waves path { animation: lc-wave 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.lchat.has-unread .lchat__waves path:nth-child(2) { animation-delay: 1.2s; }
@keyframes lc-wave { 0% { opacity: .7; transform: scale(1); stroke-width: 1.6; } 100% { opacity: 0; transform: scale(1.65); stroke-width: .4; } }

/* подсказка слева от кнопки */
.lchat__tip {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(10px, -50%); white-space: nowrap;
  padding: 10px 16px; border-radius: 999px; color: var(--lc-ink); background: rgba(255, 251, 244, .55);
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(255, 255, 255, .45), 0 8px 18px -10px rgba(40, 20, 10, .4);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--lc-ease), transform .5s var(--lc-ease), color .6s, background-color .6s;
}
.lchat.is-dark .lchat__tip { color: var(--lc-cream); background: rgba(28, 24, 21, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 18px -10px rgba(0, 0, 0, .7); }
html[lang="hy"] .lchat__tip { letter-spacing: .08em; }
.lchat.is-tip .lchat__tip { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) { .lchat__fab:hover .lchat__tip { opacity: 1; transform: translate(0, -50%); } }

/* нижняя строка подвала главной: «Наверх» не прячется под кнопкой чата */
.foot__bottom { padding-right: 92px; }
@media (max-width: 560px) { .foot__bottom { padding-right: 76px; } }

/* ---------------- окно чата ---------------- */
.lchat__panel {
  position: fixed; z-index: 140; right: var(--lc-gap); bottom: max(20px, env(safe-area-inset-bottom));
  width: min(384px, calc(100vw - 2 * var(--lc-gap))); height: min(640px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 192px 192px 18px 18px; background: var(--lc-paper); color: var(--lc-ink);
  box-shadow: 0 0 0 1px rgba(164, 124, 60, .4), 0 30px 70px -20px rgba(0, 0, 0, .65), 0 10px 24px -10px rgba(0, 0, 0, .35);
  /* вырастает из кнопки: в закрытом виде виден только круг размером с неё */
  clip-path: inset(calc(100% - 64px) 0 0 calc(100% - 64px) round 32px);
  opacity: 0; transition: clip-path .6s var(--lc-ease), opacity .3s;
}
.lchat.is-open .lchat__panel { clip-path: inset(0 round 192px 192px 18px 18px); opacity: 1; }

.lchat__hd {
  position: relative; flex: none; height: 176px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 24px 18px; text-align: center; color: var(--lc-cream); overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, #4a3524, transparent 70%), linear-gradient(#2a221d, var(--lc-ink));
}
.lchat__hd::before { /* латунная арка-кант, как рамы арок Lorke */
  content: ''; position: absolute; inset: 9px 9px -40px; border-radius: 999px 999px 0 0; border: 1px solid rgba(198, 161, 94, .6); pointer-events: none;
}
.lchat__glow { position: absolute; left: 50%; top: 22px; width: 120px; height: 70px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(255, 220, 160, .28), transparent 70%); pointer-events: none; }
.lchat__logo { position: relative; width: 38px; height: 50px; fill: var(--lc-brass-l); margin-bottom: 8px; }
.lchat__logo--txt { width: auto; height: auto; font: italic 400 30px/1 'Cormorant Garamond', serif; color: var(--lc-brass-l); }
.lchat__ttl { position: relative; margin: 0; font: 400 26px/1.1 'Cormorant Garamond', 'Noto Serif Armenian', serif; letter-spacing: .01em; }
html[lang="hy"] .lchat__ttl { font-size: 22px; }
.lchat__st { position: relative; max-width: calc(100% - 64px); margin: 7px 0 0; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; color: rgba(242, 232, 211, .72); }
.lchat__st i { width: 7px; height: 7px; border-radius: 50%; background: #f3d48f; box-shadow: 0 0 8px 2px rgba(255, 210, 140, .7); }
.lchat__st.is-off i { background: #8c8378; box-shadow: none; }
.lchat__x {
  position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(228, 204, 147, .45);
  background: rgba(28, 24, 21, .6); color: var(--lc-cream); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s;
}
.lchat__x:hover { background: var(--lc-cream); color: var(--lc-ink); }
.lchat__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.lchat__log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 8px;
  background: var(--lc-paper); scrollbar-width: thin; scrollbar-color: rgba(164, 124, 60, .4) transparent;
}
.lchat__msg { max-width: 84%; padding: 10px 14px 7px; font-size: 15px; line-height: 1.45; animation: lc-in .45s var(--lc-ease); overflow-wrap: anywhere; }
@keyframes lc-in { from { opacity: 0; transform: translateY(8px); } }
.lchat__msg p { margin: 0; }
.lchat__msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lchat__msg--them { align-self: flex-start; background: #fff; border: 1px solid rgba(198, 161, 94, .38); border-radius: 4px 18px 18px 18px; }
.lchat__msg--hello { position: relative; }
.lchat__msg--me { align-self: flex-end; background: var(--lc-wine); color: var(--lc-cream); border-radius: 18px 4px 18px 18px; }
.lchat__msg.is-pending { opacity: .7; }
.lchat__time { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .04em; text-align: right; opacity: .55; }
.lchat__retry { display: block; margin: 4px 0 0 auto; padding: 0; border: 0; background: none; color: #ffd9a8; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.lchat__img { display: block; margin: -4px -8px 6px; border-radius: 12px; overflow: hidden; }
.lchat__img img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.lchat__sys { align-self: center; margin: 6px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(28, 24, 21, .5); display: flex; align-items: center; gap: 10px; text-align: center; }
.lchat__sys::before, .lchat__sys::after { content: ''; width: 22px; height: 1px; background: var(--lc-brass); flex: none; }

.lchat__alt { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 5px; }
.lchat__btn {
  display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--lc-ink); background: var(--lc-ink); color: var(--lc-cream) !important; text-decoration: none !important;
  font: 500 12px/1 'Jost', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s;
}
.lchat__btn:hover { background: var(--lc-wine); border-color: var(--lc-wine); }
.lchat__btn--line { background: transparent; color: var(--lc-ink) !important; letter-spacing: .06em; }
.lchat__btn--line:hover { color: var(--lc-cream) !important; }
.lchat__btn:disabled { opacity: .5; cursor: default; }

.lchat__phone { display: flex; flex-direction: column; gap: 7px; padding-bottom: 12px; }
.lchat__phone p { margin-bottom: 3px; }
.lchat__phone input {
  width: 100%; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(28, 24, 21, .18); background: var(--lc-paper);
  font: 400 15px 'Jost', 'Noto Sans Armenian', system-ui, sans-serif; color: var(--lc-ink); outline: none; transition: border-color .3s;
}
.lchat__phone input:focus { border-color: var(--lc-brass); }
.lchat__phone input.is-err { border-color: #b3282b; }

.lchat__chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; background: var(--lc-paper); }
.lchat__chips button {
  padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(164, 124, 60, .55); background: transparent; color: var(--lc-ink);
  font: 400 13px/1.2 'Jost', 'Noto Sans Armenian', system-ui, sans-serif; cursor: pointer; transition: background .3s, color .3s, border-color .3s;
}
.lchat__chips button:hover { background: var(--lc-ink); border-color: var(--lc-ink); color: var(--lc-cream); }

.lchat__form { flex: none; position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)) 16px; border-top: 1px solid rgba(198, 161, 94, .3); background: var(--lc-stone); }
.lchat__hp { display: none; } /* ловушка для ботов; display:none — чтобы iPhone не перескакивал на неё стрелками над клавиатурой */
.lchat__form textarea {
  flex: 1; min-height: 42px; max-height: 120px; padding: 10px 2px; border: 0; background: transparent; resize: none; outline: none;
  font: 400 16px/1.4 'Jost', 'Noto Sans Armenian', system-ui, sans-serif; color: var(--lc-ink);
}
.lchat__form textarea::placeholder { color: rgba(28, 24, 21, .45); }
.lchat__send {
  flex: none; width: 42px; height: 42px; border-radius: 999px 999px 10px 10px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--lc-ink); color: var(--lc-brass-l); transition: background .3s, transform .3s var(--lc-ease), opacity .3s;
}
.lchat__send:not(:disabled):hover { background: var(--lc-wine); transform: translateY(-2px); }
.lchat__send:disabled { opacity: .35; cursor: default; }
.lchat__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* телефон: кнопка поменьше, окно на весь экран с аркой наверху */
@media (max-width: 560px) {
  .lchat { --lc-gap: max(14px, env(safe-area-inset-right)); }
  /* масштабом, а не размером: форма стекла задана в пикселях квадрата 64×64 */
  .lchat__fab { bottom: max(18px, env(safe-area-inset-bottom)); scale: .9; transform-origin: 100% 100%; }
  /* окно повторяет видимую область (visualViewport): на iPhone с клавиатурой Safari сдвигает страницу,
     и без этого под полем ввода просвечивал сайт. --lc-top / --lc-vh ставит chat.js */
  .lchat__panel { right: 0; top: var(--lc-top, 0px); bottom: auto; width: 100vw; height: var(--lc-vh, 100dvh); border-radius: 50vw 50vw 0 0;
    clip-path: inset(calc(100% - 58px - 20px) var(--lc-gap) 20px calc(100% - 58px - var(--lc-gap)) round 29px); }
  .lchat.is-open .lchat__panel { clip-path: inset(0 round 50vw 50vw 0 0); }
  .lchat::before { /* затемнение страницы в углах над аркой */
    content: ''; position: fixed; left: 0; right: 0; top: var(--lc-top, 0px); height: var(--lc-vh, 100dvh); z-index: 139;
    background: rgba(20, 16, 13, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity .5s, visibility 0s .5s;
  }
  .lchat::after { /* всё, что ниже видимой области (за клавиатурой и её полупрозрачной панелью), — цвета поля ввода */
    content: ''; position: fixed; left: 0; right: 0; top: calc(var(--lc-top, 0px) + var(--lc-vh, 100dvh) - 1px); height: 100vh; z-index: 140;
    background: var(--lc-stone); opacity: 0; pointer-events: none;
  }
  /* закрытый чат: слои прячем совсем, а не только делаем прозрачными. Safari на iPhone красит строку состояния
     в цвет шапки, только если у верхнего края экрана нет других закреплённых слоёв; прозрачное затемнение во весь
     экран ему мешало, и над шапкой просвечивала страница */
  .lchat::before, .lchat::after { visibility: hidden; }
  .lchat.is-open::before, .lchat.is-open::after { opacity: 1; visibility: visible; }
  .lchat.is-open::before { transition: opacity .5s; }
  /* клавиатура открыта: арка ниже и положе, без логотипа — место под переписку */
  .lchat.is-kb .lchat__panel { border-radius: 50% 50% 0 0 / 64px 64px 0 0; }
  .lchat.is-kb.is-open .lchat__panel { clip-path: inset(0 round 50% 50% 0 0 / 64px 64px 0 0); transition: opacity .3s; }
  .lchat.is-kb .lchat__hd { height: 104px; padding-bottom: 14px; }
  .lchat.is-kb .lchat__hd::before { border-radius: 50% 50% 0 0 / 56px 56px 0 0; }
  .lchat.is-kb .lchat__logo, .lchat.is-kb .lchat__glow { display: none; }
  .lchat.is-kb .lchat__ttl { font-size: 22px; }
  .lchat.is-kb .lchat__st { margin-top: 5px; }
  .lchat.is-kb .lchat__x { bottom: 14px; }
  .lchat.is-kb .lchat__chips { display: none; }
  .lchat.is-kb .lchat__form { padding-bottom: 10px; }
  .lchat.is-kb::before { background: #14110f; }
  /* iOS рисует полосу за панелью над клавиатурой из самой страницы, куда фиксированные слои не достают, —
     пока печатают, страницу прячем, а фон делаем цвета поля ввода */
  html.lchat-kb, html.lchat-kb body { background: #ece4d6; }
  html.lchat-kb body > :not(.lchat) { visibility: hidden; }
  .lchat__hd { height: max(170px, 44vw); }
  html.lchat-lock, html.lchat-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .lchat__dots, .lchat__dots i, .lchat__mark, .lchat.has-unread .lchat__body, .lchat.has-unread .lchat__waves path { animation: none; }
  .lchat__dots { opacity: 0; }
  .lchat__panel, .lchat__fab { transition-duration: .01s; }
}