/* Виджет анонимного чата LAMMA, светлая тема. Все цвета — через токены сайта
   (tokens.css): панель = --card, шапка/поле/реплика оператора = --paper, текст = --ink,
   вторичный текст = --mute, рамки = --line. --accent-fill — только ЗАЛИВКА (кнопки,
   реплика пользователя) с --ink сверху (10.1:1); как цвет текста он непригоден (1.73:1),
   текстовый акцент — --accent (4.57:1). Пары проверены, см. отчёт Task 3. */
.lm-chat-launcher,
.lm-chat-panel{
  --lm-bg:var(--paper); --lm-bg-2:var(--card); --lm-bg-3:var(--paper);
  --lm-rose:var(--accent);
  --lm-pearl:var(--ink); --lm-mute:var(--mute);
  --lm-line:var(--line);
  --lm-grad:var(--accent-fill);
  font-family:var(--sans,"Inter",system-ui,-apple-system,"Segoe UI",sans-serif);
  box-sizing:border-box;
}
.lm-chat-panel *,.lm-chat-panel *::before,.lm-chat-panel *::after{box-sizing:border-box}

/* ---- кнопка-открывашка (над контентом, шапкой 80 и зерном 90; ниже заставки 200) ---- */
.lm-chat-launcher{
  position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:95; min-height:48px; padding:0 1.5rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--lm-grad); color:var(--ink);
  font:600 .95rem/1 var(--sans,system-ui,sans-serif); letter-spacing:.02em;
  box-shadow:0 12px 34px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.lm-chat-launcher:hover{box-shadow:0 18px 40px -12px color-mix(in srgb, var(--accent) 70%, transparent)}
.lm-chat-launcher[hidden]{display:none}
.lm-chat-launcher:focus-visible,
.lm-chat-close:focus-visible,
.lm-chat-link:focus-visible,
.lm-chat-send:focus-visible,
.lm-msg-link:focus-visible{outline:2px solid var(--lm-pearl); outline-offset:3px}

/* ---- окно ---- */
.lm-chat-panel{
  display:none;
  position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom));
  z-index:95; width:360px; max-width:calc(100vw - 16px); max-height:min(600px,80vh);
  flex-direction:column; overflow:hidden;
  background:var(--lm-bg-2); color:var(--lm-pearl);
  border:1px solid var(--lm-line); border-radius:20px;
  box-shadow:0 30px 70px -20px color-mix(in srgb, var(--ink) 35%, transparent);
}
.lm-chat-panel.lm-open{display:flex}

.lm-chat-head{
  display:flex; align-items:center; gap:.75rem; flex:none;
  padding:1rem .6rem .9rem 1.15rem; border-bottom:1px solid var(--lm-line);
  background:var(--lm-bg-3);
}
.lm-chat-head-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem}
.lm-chat-close{
  flex:none; width:44px; height:44px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--lm-pearl);
  transition:background-color .2s, color .2s;
}
.lm-chat-close:hover{background:color-mix(in srgb, var(--accent-fill) 10%, var(--paper)); color:var(--lm-rose)}
.lm-chat-close svg{display:block; width:22px; height:22px}
.lm-chat-head strong{
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif);
  font-weight:500; font-size:1.5rem; line-height:1.1; color:var(--lm-pearl);
}
.lm-chat-sub{font-size:.8rem; color:var(--lm-mute)}

/* ---- лента ---- */
.lm-chat-feed{
  flex:1 1 auto; min-height:120px; overflow-y:auto; overscroll-behavior:contain;
  padding:1rem; display:flex; flex-direction:column; gap:.55rem;
}
.lm-chat-live{display:flex; flex-direction:column; gap:.55rem}
.lm-msg{
  max-width:86%; padding:.6rem .85rem; border-radius:16px;
  font-size:.92rem; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.lm-msg-out{align-self:flex-start; background:var(--lm-bg-3); border:1px solid var(--lm-line); border-bottom-left-radius:5px}
.lm-msg-in{align-self:flex-end; background:var(--lm-grad); color:var(--ink); border-bottom-right-radius:5px}
.lm-typing[hidden]{display:none}
.lm-typing{color:var(--lm-mute)}
.lm-typing-dot{display:inline-block; animation:lm-typing-dot 1.2s ease-in-out infinite}
.lm-typing-dot:nth-child(2){animation-delay:.2s}
.lm-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes lm-typing-dot{
  0%,60%,100%{opacity:.3; transform:translateY(0)}
  30%{opacity:1; transform:translateY(-3px)}
}
.lm-msg-link{color:var(--lm-rose); text-decoration:underline; text-underline-offset:.15em}
.lm-msg-in .lm-msg-link{color:var(--ink)}

.lm-chat-note{
  flex:none; margin:0 1rem .5rem; padding:.5rem .75rem; border-radius:12px;
  background:color-mix(in srgb, var(--accent-fill) 10%, var(--card)); color:var(--lm-rose); font-size:.85rem; line-height:1.4;
}
.lm-chat-note[hidden]{display:none}

/* ---- кнопки каналов ---- */
.lm-chat-links{
  flex:none; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding:.75rem 1rem; border-top:1px solid var(--lm-line);
}
.lm-chat-links-title{flex:1 1 100%; font-size:.8rem; color:var(--lm-mute)}
.lm-chat-link{
  flex:1 1 auto; min-height:44px; padding:0 1rem;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--lm-line); border-radius:999px;
  color:var(--lm-pearl); font-size:.88rem; font-weight:600; text-decoration:none;
}
.lm-chat-link:hover{border-color:var(--lm-rose); color:var(--lm-rose)}

/* ---- поле ввода ---- */
.lm-chat-form{
  flex:none; display:flex; gap:.5rem; align-items:center;
  padding:.75rem 1rem 1rem; border-top:1px solid var(--lm-line); margin:0;
}
.lm-chat-form input{
  flex:1 1 auto; min-width:0; min-height:44px; padding:0 1rem;
  background:var(--lm-bg); color:var(--lm-pearl);
  border:1px solid var(--mute-2); border-radius:999px;
  font:400 16px/1.2 var(--sans,system-ui,sans-serif);   /* 16px: иначе iOS приближает страницу при фокусе */
}
.lm-chat-form input::placeholder{color:var(--lm-mute)}
.lm-chat-form input:focus{outline:none; border-color:var(--lm-rose)}
.lm-chat-send{
  flex:none; min-width:44px; min-height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--lm-grad); color:var(--ink);
  font-size:1.05rem; line-height:1;
}
.lm-chat-send:disabled{opacity:.4; cursor:default}

/* ---- телефон: чат на весь экран ----
   Класс .lm-full ставит chat-widget.js при (max-width:600px), (max-height:500px) —
   узкий экран или телефон в альбомной ориентации. Высоту на время экранной
   клавиатуры скрипт подгоняет под visualViewport инлайн-стилем. */
.lm-chat-panel.lm-full{
  inset:0; top:0; right:0; bottom:0; left:0;
  width:100%; max-width:none; height:100vh; height:100dvh; max-height:none;
  border:0; border-radius:0; box-shadow:none;
}
.lm-full .lm-chat-head{
  padding:calc(.55rem + env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right))
          .55rem max(1rem, env(safe-area-inset-left));
}
.lm-full .lm-chat-head strong{font-size:1.4rem}
.lm-full .lm-chat-feed{
  min-height:0; padding:1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
}
.lm-full .lm-msg{max-width:min(88%, 34rem); font-size:.95rem}
.lm-full .lm-chat-note{
  margin:0 max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left));
}
/* каналы: одна строка; ширина кнопок — по тексту (+ добор места поровну),
   чтобы «Написать в Telegram» не переносился; перенос остаётся запасным
   вариантом при крупном системном шрифте */
.lm-full .lm-chat-links{
  gap:.4rem .5rem;
  padding:.55rem max(1rem, env(safe-area-inset-right)) .55rem max(1rem, env(safe-area-inset-left));
}
.lm-full .lm-chat-link{
  flex:1 1 auto; min-width:0; padding:.3rem .6rem;
  font-size:.84rem; line-height:1.15;
}
@media (max-width:340px){
  .lm-full .lm-chat-links{column-gap:.4rem}
  .lm-full .lm-chat-link{padding:.3rem .5rem; font-size:.78rem}
}
.lm-full .lm-chat-form{
  padding:.55rem max(1rem, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom))
          max(1rem, env(safe-area-inset-left));
}

/* низкий экран: всё плотнее, подзаголовок — в строку с заголовком.
   .lm-short ставит скрипт по реальной видимой высоте (visualViewport ≤ 500px):
   экранная клавиатура сжимает только её, медиа-запрос этого не видит.
   Медиа-запрос оставлен для альбомной ориентации как запасной путь. */
.lm-full.lm-short .lm-chat-head{padding-top:calc(.25rem + env(safe-area-inset-top)); padding-bottom:.25rem}
.lm-full.lm-short .lm-chat-head-text{flex-direction:row; align-items:baseline; flex-wrap:wrap; column-gap:.75rem}
.lm-full.lm-short .lm-chat-head strong{font-size:1.2rem}
.lm-full.lm-short .lm-chat-feed{padding-top:.6rem; padding-bottom:.6rem}
.lm-full.lm-short .lm-chat-links{padding-top:.4rem; padding-bottom:.4rem}
.lm-full.lm-short .lm-chat-form{padding-top:.4rem}
@media (max-height:500px){
  .lm-full .lm-chat-head{padding-top:calc(.25rem + env(safe-area-inset-top)); padding-bottom:.25rem}
  .lm-full .lm-chat-head-text{flex-direction:row; align-items:baseline; flex-wrap:wrap; column-gap:.75rem}
  .lm-full .lm-chat-head strong{font-size:1.2rem}
  .lm-full .lm-chat-feed{padding-top:.6rem; padding-bottom:.6rem}
  .lm-full .lm-chat-links{padding-top:.4rem; padding-bottom:.4rem}
  .lm-full .lm-chat-form{padding-top:.4rem}
}
/* печатает на низком экране (клавиатура открыта): блок каналов прячем целиком,
   шапка — одна строка без подзаголовка; всё место — ленте */
.lm-full.lm-kbd .lm-chat-links{display:none}
.lm-full.lm-kbd .lm-chat-sub{display:none}
.lm-full.lm-kbd .lm-chat-head strong{font-size:1.1rem}
/* низкий и широкий (телефон боком): подпись каналов встаёт в строку с кнопками */
@media (max-height:500px) and (min-width:560px){
  .lm-full .lm-chat-links{flex-wrap:nowrap}
  .lm-full .lm-chat-links-title{flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .lm-chat-launcher,.lm-chat-panel,.lm-chat-link,.lm-chat-send,.lm-chat-close{transition:none; animation:none}
  .lm-typing-dot{animation:none; opacity:.7; transform:none}
}

/* Открыто полноэкранное меню (nav.js ставит body.menu-open) — кнопка чата не лежит поверх пунктов */
body.menu-open #lm-chat-launcher { visibility: hidden; }