/* Свёрнутый чат: фигурка-лаунчер «Табличка 1», приветствие и бейдж. Спецификация: widget-launchers.html */

/* ---------- лаунчер ---------- */
.lx-dock {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
}

.lx {
  --lx: 64px;
  position: relative;
  display: block;
  flex: none;
  width: var(--lx);
  height: var(--lx);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s var(--ease);
}

.lx-fig {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 7px 6px rgba(12, 22, 38, 0.26));
  transition: filter 0.22s var(--ease);
}

.lx:hover, .lx.is-hover { transform: translateY(-3px) scale(1.05); }
.lx:hover .lx-fig, .lx.is-hover .lx-fig { filter: drop-shadow(0 11px 8px rgba(12, 22, 38, 0.3)); }
.lx:active, .lx.is-active { transform: translateY(0) scale(0.97); }

.lx:focus-visible, .lx.is-focus {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px var(--card);
}

.on-dark .lx:focus-visible, .on-dark .lx.is-focus {
  outline-color: var(--signal);
  box-shadow: 0 0 0 5px var(--board);
}

.lx-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--alert);
  color: var(--ink);
  font: 700 15px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: lx-pop 0.4s var(--ease) both;
}

@keyframes lx-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes lx-ping {
  0%, 100% { opacity: 0; transform: scale(1); }
  6% { opacity: 0.75; }
  26% { opacity: 0; transform: scale(1.32); }
}

.lx-plate::before {
  content: "";
  position: absolute;
  inset: 3px 3px 11px;
  border: 3px solid var(--signal-deep);
  border-radius: 11px;
  opacity: 0;
  pointer-events: none;
  animation: lx-ping 6s var(--ease) 1.2s infinite;
}

.lx-plate .lx-body { fill: var(--signal); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; transition: fill 0.22s var(--ease); }
.lx-plate .lx-rim { fill: none; stroke: var(--ink); stroke-width: 1.5; transition: stroke 0.22s var(--ease); }
.lx-plate .lx-one { fill: var(--ink); font: 700 36px var(--font-display); transition: fill 0.22s var(--ease); }

.lx-plate:hover .lx-body, .lx-plate.is-hover .lx-body { fill: var(--ink); }
.lx-plate:hover .lx-rim, .lx-plate.is-hover .lx-rim { stroke: var(--signal); }
.lx-plate:hover .lx-one, .lx-plate.is-hover .lx-one { fill: var(--signal); }
.lx-plate:hover::before, .lx-plate.is-hover::before { animation: none; }

/* ---------- приветствие рядом с фигуркой ---------- */
.lx-teaser {
  position: relative;
  max-width: 206px;
  margin-bottom: 4px;
  padding: 11px 38px 11px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: 400 16px/1.35 var(--font-body);
  box-shadow: 0 12px 18px -12px rgba(12, 22, 38, 0.5);
}

.lx-teaser::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  background: var(--card);
  transform: rotate(45deg);
}

.lx-teaser-x {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.lx-teaser-x .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.lx-teaser-x:hover { background: var(--paper-2); color: var(--ink); }

@media (max-width: 620px) {
  .lx { --lx: 56px; }
  .lx-teaser { max-width: 188px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .lx, .lx-fig, .lx-plate .lx-body, .lx-plate .lx-rim, .lx-plate .lx-one { transition: none; }
  .lx::before, .lx-badge { animation: none !important; }
}