/* ==========================================================================
   Lyss Chat — StreamElements Custom Widget (CSS) · design config v2
   Вставить это в поле CSS редактора виджета.

   Статическая часть дизайн-системы: структура сообщения, формы, анимации.
   Значения (цвета, размеры, тени, шрифты…) приходят CSS-переменными из
   widget.js (<style id="lyss-chat-dyn">), дискретные варианты — через
   data-атрибуты на #cchat. Кастомайзер грузит ЭТОТ ЖЕ файл — превью и OBS
   выглядят одинаково.

   Совместимость с OBS Browser Source (Chromium/CEF): без :has(), без
   container queries, без color-mix(), маски с -webkit- префиксами.
   ========================================================================== */

html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; width: 100%; height: 100%; }
.cchat, .cchat * { box-sizing: border-box; margin: 0; padding: 0; }
.cchat i { font-style: normal; }

/* ==========================================================================
   1. Корень и переменные по умолчанию (перекрываются из widget.js)
   ========================================================================== */
.cchat {
  --accent: #ff7bac; --accent-2: #7c9cff; --ink: #2c2740; --name: #b8558a; --role: var(--name); --sec: #7d7393;
  --f-msg: 'Nunito', system-ui, sans-serif; --f-name: 'Comfortaa', system-ui, sans-serif; --f-evt: var(--f-name);
  --fs: 19px; --fw: 600; --lh: 1.35; --ls: 0em; --fs-name: 15px; --fw-name: 700; --ls-name: .01em;
  --gap: 11px; --pad-x: 16px; --pad-y: 12px; --safe-t: 0px; --safe-r: 0px; --safe-b: 0px; --safe-l: 0px;
  --feed-w: 100%; --msg-max: 520px; --msg-min: 160px;
  --r: 18px; --r-a: 18px; --soft-k: 1; --bpx: 15px; --bpy: 11px; --bmin-h: 0px; --bw: 1.5px;
  --fill: rgba(255,255,255,.92); --hi: none; --edge: rgba(255,210,232,.9);
  --fsh: 0 0 14px rgba(255,123,172,.55), 0 6px 17px rgba(106,47,110,.3); --sfilter: none; --backdrop: none;
  --glow-c: rgba(255,123,172,.55); --glow-s: 14px;
  --tail-fill: rgba(255,255,255,.92); --tail-edge: rgba(255,210,232,.9); --tail-s: 10px; --tail-pos: .72; --tail-rot: 0deg; --tail-r: 1px;
  --ava-size: 44px; --ava-ring-w: 2px; --ava-ring: #ff7bac; --ava-op: 1; --ava-x: 0px; --ava-y: 0px; --ava-bg: var(--role); --ava-filter: none;
  --badge-s: 18px; --badge-gap: 4px; --badge-op: 1; --badge-sat: 1;
  --emote-h: 1.4em; --emote-max: 64px; --emote-gap: 1px; --emote-big: 56px;
  --time-size: .72em; --time-op: .6; --time-c: var(--name);
  --deco-col: #ffb3d1; --deco-op: .45; --deco-filter: none;
  --md-c: #ffb3d1; --md-s: 12px; --md-off: 4px; --md-op: .85; --md-rot: 0deg; --md-glow: none;
  --in-dur: 700ms; --out-dur: 550ms; --in-ease: cubic-bezier(.18,.8,.3,1); --k: 1;
  --in-x: -40px; --in-y: 0px; --out-x: -46px; --out-y: 0px;
  --idle-dur: 3s; --glint-dur: 7s; --glint-op: .35; --glint-angle: 115deg; --iri-op: .35;
  --hl-c: #ffc861;
  --ct-bg: transparent; --ct-r: 24px; --ct-inset: 0px; --ct-pad: 10px; --ct-border: 0 solid transparent; --ct-shadow: none; --ct-backdrop: none;
  --mascot-s: 110px; --mascot-op: 1; --mascot-x: 0px; --mascot-y: 0px;

  position: fixed; top: 0; bottom: 0; left: 0;
  width: var(--feed-w);
  display: flex; flex-direction: column;
  padding: calc(var(--pad-y) + var(--safe-t)) calc(var(--pad-x) + var(--safe-r)) calc(var(--pad-y) + var(--safe-b)) calc(var(--pad-x) + var(--safe-l));
  font-family: var(--f-msg);
  color: var(--ink);
  overflow: clip; overflow-clip-margin: 30px;
}
.cchat[data-align="center"] { left: calc((100% - var(--feed-w)) / 2); }
.cchat[data-align="right"]  { left: auto; right: 0; }
.cchat[data-ct="on"] {
  padding: calc(var(--safe-t) + var(--ct-inset) + var(--ct-pad)) calc(var(--safe-r) + var(--ct-inset) + var(--ct-pad))
           calc(var(--safe-b) + var(--ct-inset) + var(--ct-pad)) calc(var(--safe-l) + var(--ct-inset) + var(--ct-pad));
}

/* иконка-маска: <i class="ico i-star"> (маски генерирует widget.js).
   Специфичность минимальная — размеры/цвет перекрываются конкретными классами. */
.ico {
  display: inline-block; flex: none; width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
          mask: var(--m) center / contain no-repeat;
}

/* ==========================================================================
   2. Слои: панель-контейнер, декор, маскот
   ========================================================================== */
.panel {
  position: absolute; z-index: 1; display: none; pointer-events: none; overflow: hidden;
  top: calc(var(--safe-t) + var(--ct-inset)); right: calc(var(--safe-r) + var(--ct-inset));
  bottom: calc(var(--safe-b) + var(--ct-inset)); left: calc(var(--safe-l) + var(--ct-inset));
  background: var(--ct-bg);
  border: var(--ct-border); border-radius: var(--ct-r);
  box-shadow: var(--ct-shadow);
  -webkit-backdrop-filter: var(--ct-backdrop); backdrop-filter: var(--ct-backdrop);
}
.cchat[data-ct="on"] .panel { display: block; }
.panel::before { content: ''; position: absolute; inset: 0; background: var(--ct-hi, none); }
.panel::after  { content: ''; position: absolute; inset: 0; display: none; background: var(--ct-img, none) center / cover no-repeat; opacity: var(--ct-img-op, 1); }
.cchat[data-ctimg="on"] .panel::after { display: block; }

.deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.deco span {
  position: absolute; width: var(--s, 12px); height: var(--s, 12px);
  background: var(--deco-col);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  opacity: var(--deco-op);
  filter: var(--deco-filter);
  transform: rotate(var(--rot, 0deg));
  animation: deco-twinkle var(--d, 4.5s) ease-in-out var(--dl, 0s) infinite;
}
/* пузырьки — объём через градиенты, не маской */
.deco span.is-bubble {
  -webkit-mask: none; mask: none; border-radius: 50%;
  background:
    radial-gradient(circle at 33% 30%, rgba(255,255,255,.95) 0 11%, rgba(255,255,255,0) 15%),
    radial-gradient(circle, rgba(255,255,255,.07) 0 55%, var(--deco-col) 63%, rgba(255,255,255,0) 72%);
}
.deco span.is-img { -webkit-mask: none; mask: none; background: var(--deco-img, none) center / contain no-repeat; }
.cchat[data-deco="off"] .deco { display: none; }

@keyframes deco-twinkle {
  0%, 100% { opacity: calc(var(--deco-op) * .55); transform: rotate(var(--rot, 0deg)) scale(.8); }
  50%      { opacity: calc(var(--deco-op) * 1.55); transform: rotate(calc(var(--rot, 0deg) + 8deg)) scale(1.15); }
}
@keyframes deco-float {
  0%   { opacity: 0; transform: translateY(14px) rotate(var(--rot, 0deg)); }
  20%, 75% { opacity: var(--deco-op); }
  100% { opacity: 0; transform: translateY(-46px) rotate(calc(var(--rot, 0deg) + 20deg)); }
}
@keyframes deco-drift { 0%, 100% { transform: translateX(calc(var(--dx, 10px) * -1)) rotate(var(--rot, 0deg)); } 50% { transform: translateX(var(--dx, 10px)) rotate(calc(var(--rot, 0deg) + 10deg)); } }
@keyframes deco-spin  { to { transform: rotate(calc(var(--rot, 0deg) + 360deg)); } }
@keyframes deco-pulse { 0%, 100% { transform: rotate(var(--rot, 0deg)) scale(.75); } 50% { transform: rotate(var(--rot, 0deg)) scale(1.2); } }
.cchat[data-decoanim="float"] .deco span { animation-name: deco-float; animation-timing-function: linear; }
.cchat[data-decoanim="drift"] .deco span { animation-name: deco-drift; }
.cchat[data-decoanim="spin"]  .deco span { animation-name: deco-spin; animation-timing-function: linear; animation-duration: calc(var(--d, 5s) * 3); }
.cchat[data-decoanim="pulse"] .deco span { animation-name: deco-pulse; }
.cchat[data-decoanim="none"]  .deco span { animation: none; }

.mascot { position: absolute; z-index: 0; width: var(--mascot-s); height: auto; opacity: var(--mascot-op); pointer-events: none; transform-origin: 50% 100%; }
.mascot[hidden] { display: none; }
.mascot[data-layer="front"] { z-index: 6; }
.mascot[data-pos="top-left"]     { top: var(--mascot-y); left: var(--mascot-x); }
.mascot[data-pos="top"]          { top: var(--mascot-y); left: calc(50% - var(--mascot-s) / 2 + var(--mascot-x)); }
.mascot[data-pos="top-right"]    { top: var(--mascot-y); right: calc(var(--mascot-x) * -1); }
.mascot[data-pos="left"]         { top: calc(42% + var(--mascot-y)); left: var(--mascot-x); }
.mascot[data-pos="right"]        { top: calc(42% + var(--mascot-y)); right: calc(var(--mascot-x) * -1); }
.mascot[data-pos="bottom-left"]  { bottom: calc(var(--mascot-y) * -1); left: var(--mascot-x); }
.mascot[data-pos="bottom"]       { bottom: calc(var(--mascot-y) * -1); left: calc(50% - var(--mascot-s) / 2 + var(--mascot-x)); }
.mascot[data-pos="bottom-right"] { bottom: calc(var(--mascot-y) * -1); right: calc(var(--mascot-x) * -1); }
@keyframes mascot-bob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mascot-sway    { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes mascot-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, 1.03); } }
@keyframes mascot-peek    { 0%, 55%, 100% { transform: translateY(35%); } 65%, 90% { transform: translateY(0); } }
.mascot[data-anim="bob"]     { animation: mascot-bob 3.2s ease-in-out infinite; }
.mascot[data-anim="sway"]    { animation: mascot-sway 4s ease-in-out infinite; }
.mascot[data-anim="breathe"] { animation: mascot-breathe 3.6s ease-in-out infinite; }
.mascot[data-anim="peek"]    { animation: mascot-peek 9s ease-in-out infinite; }

/* ==========================================================================
   3. Лента: прижатие (верх/низ), где новое сообщение, выравнивание
   ========================================================================== */
.log {
  position: relative; z-index: 3;
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: var(--gap);
  padding: 8px 8px 14px;
  overflow: clip; overflow-clip-margin: 40px;
}
.cchat[data-newest="top"] .log { flex-direction: column-reverse; justify-content: flex-start; }
.cchat[data-anchor="top"] .log { justify-content: flex-start; }
.cchat[data-anchor="top"][data-newest="top"] .log { justify-content: flex-end; }
.cchat[data-align="center"] .log { align-items: center; }
.cchat[data-align="right"]  .log { align-items: flex-end; }

/* ==========================================================================
   4. Сообщение: сетка «аватар · ник · пузырь · время»
   ========================================================================== */
.item { position: relative; flex: none; max-width: min(100%, var(--msg-max)); }
.cchat[data-width="fixed"] .item { width: min(100%, var(--msg-max)); }
.cchat[data-width="auto"] .item,
.cchat[data-width="adaptive"] .item { width: -webkit-fit-content; width: fit-content; }

.lc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: ". head" "ava bubble" ". time";
  align-items: start; justify-items: start;
  transform-origin: 0 100%;
}
.cchat[data-width="fixed"] .lc-row { justify-items: stretch; }
.cchat[data-ava="on"][data-avplace="outside"] .msg .lc-row { column-gap: 10px; }
.msg__ava  { grid-area: ava; }
.lc-row > .msg__head { grid-area: head; }
.lc-row > .lc-b { grid-area: bubble; }
.msg__time--below { grid-area: time; }

/* ник рядом с аватаркой, сообщение под ним */
.cchat[data-namepos="beside"] .msg .lc-row { grid-template-areas: "ava head" ". bubble" ". time"; }
.cchat[data-namepos="beside"] .msg .msg__ava,
.cchat[data-namepos="beside"] .msg .lc-row > .msg__head { align-self: center; }

/* выравнивание вправо — зеркальная сетка */
.cchat[data-align="right"] .lc-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head ." "bubble ava" "time .";
  justify-items: end; transform-origin: 100% 100%;
}
.cchat[data-align="right"][data-width="fixed"] .lc-row { justify-items: stretch; }
.cchat[data-align="right"][data-namepos="beside"] .msg .lc-row { grid-template-areas: "head ava" "bubble ." "time ."; }
.cchat[data-align="center"] .lc-row { transform-origin: 50% 100%; }

.evt .lc-row { display: block; }
.cchat[data-width="fixed"] .evt .lc-b { width: 100%; }
.cchat[data-width="adaptive"] .lc-b { min-width: min(100%, var(--msg-min)); }

/* ==========================================================================
   5. Пузырь: форма (.lc-shape) + рамка (.lc-edge) + заливка (.lc-fill)
   ========================================================================== */
.lc-b {
  --br: var(--r);
  position: relative; isolation: isolate;
  min-width: 0; max-width: 100%;
  min-height: var(--bmin-h);
  padding: var(--bpy) var(--bpx);
  font-size: var(--fs);
  line-height: var(--lh);
}
.lc-shape, .lc-edge, .lc-fill { position: absolute; inset: 0; display: block; border-radius: var(--br); pointer-events: none; }
.lc-shape { z-index: 0; }
.lc-fill {
  z-index: 1; overflow: hidden;
  background: var(--pal-layer, linear-gradient(transparent, transparent)), var(--hl-layer, linear-gradient(transparent, transparent)), var(--fill);
  box-shadow: var(--fsh), var(--role-glow, 0 0 0 transparent);
  -webkit-backdrop-filter: var(--backdrop); backdrop-filter: var(--backdrop);
}
/* блики стекла / грани кристалла */
.lc-fill::before { content: ''; position: absolute; inset: 0; background: var(--hi); pointer-events: none; }
/* картинка-фон сообщения */
.lc-fill::after  { content: ''; position: absolute; inset: 0; display: none; background: var(--img, none) center / cover no-repeat; opacity: var(--img-op, 1); }
.cchat[data-fillimg="on"] .lc-fill::after { display: block; }
.cchat[data-fill="dynamic"] .lc-fill { animation: lc-dyn var(--dyn-dur, 10s) ease-in-out infinite alternate; }
@keyframes lc-dyn { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* рамка-кольцо (формы на border-radius) — не просвечивает через прозрачную заливку */
.lc-b[data-kind="radius"] .lc-edge {
  z-index: 2;
  padding: var(--bw);
  background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* формы на clip-path / масках: тени повторяют силуэт (drop-shadow на обёртке) */
.lc-b[data-kind="clip"] .lc-shape,
.lc-b[data-kind="mask"] .lc-shape { filter: var(--sfilter); }
.lc-b[data-kind="clip"] .lc-fill { border-radius: 0; box-shadow: none; -webkit-clip-path: var(--clip); clip-path: var(--clip); }
.lc-b[data-kind="clip"] .lc-edge { border-radius: 0; z-index: 2; background: var(--edge); -webkit-clip-path: var(--clip-ring); clip-path: var(--clip-ring); }
.lc-b[data-kind="mask"] .lc-fill { border-radius: 0; box-shadow: none; -webkit-mask: var(--mk-core); -webkit-mask-box-image: var(--mk-fill); }
.lc-b[data-kind="mask"] .lc-edge { border-radius: 0; z-index: 2; background: var(--edge); -webkit-mask-box-image: var(--mk-ring); }

/* внутренняя и внешняя дополнительные рамки */
.cchat[data-binner="on"] .lc-b[data-kind="radius"] .lc-shape::before,
.cchat[data-bouter="on"] .lc-b[data-kind="radius"] .lc-shape::after {
  content: ''; position: absolute; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cchat[data-binner="on"] .lc-b[data-kind="radius"] .lc-shape::before {
  inset: calc(var(--bw) + 2px); padding: 1px; border-radius: var(--br); background: var(--inner-c, rgba(255,255,255,.5));
}
.cchat[data-bouter="on"] .lc-b[data-kind="radius"] .lc-shape::after {
  inset: calc((var(--outer-gap, 3px) + var(--outer-w, 2px)) * -1); padding: var(--outer-w, 2px);
  border-radius: calc(var(--r) + var(--outer-gap, 3px) + var(--outer-w, 2px)); background: var(--outer-c, rgba(255,255,255,.5));
}
/* рамка-картинка (9-slice) вместо кольца */
.cchat[data-bimg="on"] .lc-b[data-kind="radius"] .lc-edge {
  -webkit-mask: none; mask: none; background: none; padding: 0;
  inset: calc(var(--bimg-w, 14px) * -.4);
  border-style: solid; border-color: transparent; border-width: var(--bimg-w, 14px);
  border-image-source: var(--bimg, none); border-image-slice: var(--bimg-slice, 30);
  border-image-width: var(--bimg-w, 14px); border-image-repeat: round;
}

/* хвостик пузыря: вогнутый силуэт с мягким кончиком. Кромка — нижний слой, заливка — ::after
   (вынесена на толщину кромки у основания, чтобы шов с пузырём не просвечивал) */
.lc-tail {
  position: absolute; z-index: 1; display: block;
  width: var(--tail-s); height: var(--tail-s);
  --tail-t: max(1px, var(--tail-r));
  background: var(--tail-edge);
  -webkit-clip-path: polygon(0% 0%, 7.0% 15.6%, 12.0% 30.3%, 15.0% 44.1%, 16.0% 57.0%, 15.0% 69.1%, 12.0% 80.3%, 7.0% 90.6%, 0% calc(100% - var(--tail-t)), var(--tail-t) 100%, 15.6% 95.6%, 30.3% 92.5%, 44.1% 90.6%, 57.0% 90.0%, 69.1% 90.6%, 80.3% 92.5%, 90.6% 95.6%, 100% 100%);
          clip-path: polygon(0% 0%, 7.0% 15.6%, 12.0% 30.3%, 15.0% 44.1%, 16.0% 57.0%, 15.0% 69.1%, 12.0% 80.3%, 7.0% 90.6%, 0% calc(100% - var(--tail-t)), var(--tail-t) 100%, 15.6% 95.6%, 30.3% 92.5%, 44.1% 90.6%, 57.0% 90.0%, 69.1% 90.6%, 80.3% 92.5%, 90.6% 95.6%, 100% 100%);
}
.lc-tail::after {
  content: ''; position: absolute; inset: 0 0 var(--bw) var(--bw);
  background: var(--tail-fill);
  -webkit-clip-path: polygon(0% 0%, 7.0% 15.6%, 12.0% 30.3%, 15.0% 44.1%, 16.0% 57.0%, 15.0% 69.1%, 12.0% 80.3%, 7.0% 90.6%, 0% calc(100% - var(--tail-t)), var(--tail-t) 100%, 15.6% 95.6%, 30.3% 92.5%, 44.1% 90.6%, 57.0% 90.0%, 69.1% 90.6%, 80.3% 92.5%, 90.6% 95.6%, 100% 100%);
          clip-path: polygon(0% 0%, 7.0% 15.6%, 12.0% 30.3%, 15.0% 44.1%, 16.0% 57.0%, 15.0% 69.1%, 12.0% 80.3%, 7.0% 90.6%, 0% calc(100% - var(--tail-t)), var(--tail-t) 100%, 15.6% 95.6%, 30.3% 92.5%, 44.1% 90.6%, 57.0% 90.0%, 69.1% 90.6%, 80.3% 92.5%, 90.6% 95.6%, 100% 100%);
}
.lc-b[data-tail="left"] .lc-tail   { left: calc(var(--tail-s) * -.5 + var(--bw) * .3); top: calc((100% - var(--tail-s)) * var(--tail-pos)); transform: rotate(calc(45deg + var(--tail-rot))); }
.lc-b[data-tail="right"] .lc-tail  { right: calc(var(--tail-s) * -.5 + var(--bw) * .3); top: calc((100% - var(--tail-s)) * var(--tail-pos)); transform: rotate(calc(-135deg + var(--tail-rot))); }
.lc-b[data-tail="bottom"] .lc-tail { bottom: calc(var(--tail-s) * -.5 + var(--bw) * .3); left: calc((100% - var(--tail-s)) * var(--tail-pos)); transform: rotate(calc(-45deg + var(--tail-rot))); }
.lc-b[data-tail="top"] .lc-tail    { top: calc(var(--tail-s) * -.5 + var(--bw) * .3); left: calc((100% - var(--tail-s)) * var(--tail-pos)); transform: rotate(calc(135deg + var(--tail-rot))); }
.lc-b[data-tail="bottom"] { margin-bottom: calc(var(--tail-s) * .45); }
.lc-b[data-tail="top"]    { margin-top: calc(var(--tail-s) * .45); }

.lc-content { position: relative; z-index: 3; min-width: 0; }
.lc-content.has-ava { display: flex; align-items: flex-start; gap: 10px; }
.msg__main { min-width: 0; flex: 1 1 auto; }

/* ==========================================================================
   6. Формы сообщений (17)
   ========================================================================== */
/* 01 Rounded — скругление + асимметрия (угол у аватарки) + «мягкость» */
.lc-b[data-shape="rounded"], .lc-b[data-shape="speech"] {
  --br: var(--r) var(--r) var(--r) var(--r-a) / calc(var(--r) * var(--soft-k)) calc(var(--r) * var(--soft-k)) calc(var(--r) * var(--soft-k)) calc(var(--r-a) * var(--soft-k));
}
.cchat[data-align="right"] .lc-b[data-shape="rounded"], .cchat[data-align="right"] .lc-b[data-shape="speech"] {
  --br: var(--r) var(--r) var(--r-a) var(--r) / calc(var(--r) * var(--soft-k)) calc(var(--r) * var(--soft-k)) calc(var(--r-a) * var(--soft-k)) calc(var(--r) * var(--soft-k));
}
/* 02 Soft Bubble — эллиптические углы, мягче и пухлее */
.lc-b[data-shape="soft"] { --br: calc(var(--r) * 1.6) / calc(var(--r) * 1.25 * var(--soft-k)); padding-left: calc(var(--bpx) + 3px); padding-right: calc(var(--bpx) + 3px); }
/* 03 Pill — полукруглые торцы */
.lc-b[data-shape="pill"] { --br: 999px; padding-left: calc(var(--bpx) + 6px); padding-right: calc(var(--bpx) + 6px); }
/* 04 Capsule — эллиптические торцы */
.lc-b[data-shape="capsule"] { --br: calc(var(--r) * 2.2) / 50%; padding-left: calc(var(--bpx) + 5px); padding-right: calc(var(--bpx) + 5px); }
/* 05 Organic Blob — у каждого сообщения свой вариант (data-v) */
.lc-b[data-shape="blob"] { --br: calc(var(--r) * 2.4) calc(var(--r) * 1.3) calc(var(--r) * 2) calc(var(--r) * 1.1) / calc(var(--r) * 1.5) calc(var(--r) * 2.2) calc(var(--r) * 1.2) calc(var(--r) * 1.9); padding-left: calc(var(--bpx) + 4px); padding-right: calc(var(--bpx) + 4px); }
.item[data-v="2"] .lc-b[data-shape="blob"] { --br: calc(var(--r) * 1.2) calc(var(--r) * 2.6) calc(var(--r) * 1.4) calc(var(--r) * 2.2) / calc(var(--r) * 2) calc(var(--r) * 1.3) calc(var(--r) * 2.1) calc(var(--r) * 1.2); }
.item[data-v="3"] .lc-b[data-shape="blob"] { --br: calc(var(--r) * 2) calc(var(--r) * 1.6) calc(var(--r) * 1.1) calc(var(--r) * 2.5) / calc(var(--r) * 1.3) calc(var(--r) * 1.9) calc(var(--r) * 2.3) calc(var(--r) * 1.4); }
/* 06 Crystal — срезанные грани + блики-плоскости */
.lc-b[data-shape="crystal"] {
  --c: max(9px, calc(var(--r) * .7)); --ci: calc(var(--c) - var(--bw) * .41);
  --clip: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  --clip-ring: polygon(evenodd, var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0,
    calc(var(--bw) + var(--ci)) var(--bw), var(--bw) calc(var(--bw) + var(--ci)), var(--bw) calc(100% - var(--bw) - var(--ci)), calc(var(--bw) + var(--ci)) calc(100% - var(--bw)),
    calc(100% - var(--bw) - var(--ci)) calc(100% - var(--bw)), calc(100% - var(--bw)) calc(100% - var(--bw) - var(--ci)), calc(100% - var(--bw)) calc(var(--bw) + var(--ci)), calc(100% - var(--bw) - var(--ci)) var(--bw), calc(var(--bw) + var(--ci)) var(--bw));
  padding-left: calc(var(--bpx) + 4px); padding-right: calc(var(--bpx) + 4px);
}
.lc-b[data-shape="crystal"] .lc-fill::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.34) 0 16%, rgba(255,255,255,0) 16.5%),
    linear-gradient(315deg, rgba(255,255,255,.16) 0 13%, rgba(255,255,255,0) 13.5%),
    linear-gradient(100deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.13) 56.5% 69%, rgba(255,255,255,0) 69.5%),
    linear-gradient(52deg, rgba(255,255,255,0) 83%, rgba(255,255,255,.22) 83.3% 84.1%, rgba(255,255,255,0) 84.4%),
    var(--hi);
}
.lc-b[data-shape="crystal"]::after {
  content: ''; position: absolute; z-index: 4; top: -5px; right: 7px; width: 12px; height: 12px;
  background: #fff; opacity: .9; pointer-events: none;
  -webkit-mask: var(--m-sparkle) center / contain no-repeat; mask: var(--m-sparkle) center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9));
}
/* 07 Cloud — пухлые бугорки по краю (9-slice маска, повторяется по длине) */
/* --mk-core — сплошная середина: перекрывает швы между плитками 9-slice */
.lc-b[data-shape="cloud"] {
  --mk-fill: var(--cloud-fill); --mk-ring: var(--cloud-ring);
  --mk-core: linear-gradient(#000 0 0) center / calc(100% - var(--cloud-s, 16px) * 1.8) calc(100% - var(--cloud-s, 16px)) no-repeat,
             linear-gradient(#000 0 0) center / calc(100% - var(--cloud-s, 16px)) calc(100% - var(--cloud-s, 16px) * 1.8) no-repeat;
  padding: calc(var(--bpy) + var(--cloud-s, 16px) * .35) calc(var(--bpx) + var(--cloud-s, 16px) * .3);
}
/* 08 Heart — лепестки сверху, кончик снизу (9-slice маска) */
.lc-b[data-shape="heart"] {
  --mk-fill: var(--heart-fill); --mk-ring: var(--heart-ring);
  --mk-core: linear-gradient(#000 0 0) center / calc(100% - var(--heart-s, 30px) * .12) calc(100% - var(--heart-s, 30px) * 2.1) no-repeat,
             linear-gradient(#000 0 0) center / calc(100% - var(--heart-s, 30px) * 1.8) calc(100% - var(--heart-s, 30px) * 1.5) no-repeat;
  padding: calc(var(--bpy) + var(--heart-s, 30px) * .62) calc(var(--bpx) + var(--heart-s, 30px) * .22) calc(var(--bpy) + var(--heart-s, 30px) * .5);
  text-align: center;
}
/* 09 Gem — шестигранник */
.lc-b[data-shape="gem"] {
  --g: 15px;
  --clip: polygon(var(--g) 0, calc(100% - var(--g)) 0, 100% 50%, calc(100% - var(--g)) 100%, var(--g) 100%, 0 50%);
  --clip-ring: polygon(evenodd, var(--g) 0, calc(100% - var(--g)) 0, 100% 50%, calc(100% - var(--g)) 100%, var(--g) 100%, 0 50%, var(--g) 0,
    calc(var(--g) + var(--bw) * .45) var(--bw), calc(var(--bw) * 1.15) 50%, calc(var(--g) + var(--bw) * .45) calc(100% - var(--bw)),
    calc(100% - var(--g) - var(--bw) * .45) calc(100% - var(--bw)), calc(100% - var(--bw) * 1.15) 50%, calc(100% - var(--g) - var(--bw) * .45) var(--bw), calc(var(--g) + var(--bw) * .45) var(--bw));
  padding-left: calc(var(--bpx) + 12px); padding-right: calc(var(--bpx) + 12px);
}
.lc-b[data-shape="gem"] .lc-fill::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,.14)),
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%),
    var(--hi);
}
/* 10 Speech Bubble — rounded + хвостик к аватарке (см. .lc-tail) */
/* 11 Asymmetric Liquid — «капля», может медленно перетекать */
.lc-b[data-shape="liquid"] { --br: calc(var(--r) * .6) calc(var(--r) * 2.6) calc(var(--r) * 1.4) calc(var(--r) * .5) / calc(var(--r) * 1.8) calc(var(--r) * 1.1) calc(var(--r) * 2.3) calc(var(--r) * .7); padding-left: calc(var(--bpx) + 3px); padding-right: calc(var(--bpx) + 5px); }
.cchat[data-align="right"] .lc-b[data-shape="liquid"] { --br: calc(var(--r) * 2.6) calc(var(--r) * .6) calc(var(--r) * .5) calc(var(--r) * 1.4) / calc(var(--r) * 1.1) calc(var(--r) * 1.8) calc(var(--r) * .7) calc(var(--r) * 2.3); }
/* 12 Minimal Line — только акцентная линия слева */
.lc-b[data-shape="line"] { --br: 0; padding: 2px 4px 2px 14px; }
.lc-b[data-shape="line"] .lc-fill { background: transparent; box-shadow: none; border-left: 3px solid var(--role); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lc-b[data-shape="line"] .lc-edge, .lc-b[data-shape="line"] .lc-tail { display: none; }
.cchat[data-shape="line"] .lc-row > .msg__head { margin-left: 14px; }
/* формы из v1 */
.lc-b[data-shape="rect"]   { --br: 6px; }
.lc-b[data-shape="label"]  { --br: 4px 16px 16px 4px; }
.lc-b[data-shape="label"] .lc-fill { border-left: 4px solid var(--role); }
.lc-b[data-shape="banner"] { --br: 18px 18px 6px 6px; }
.lc-b[data-shape="banner"] .lc-fill { border-top: 3px solid var(--role); }
.lc-b[data-shape="outline"] .lc-fill { background: transparent; box-shadow: 0 0 var(--glow-s) var(--glow-c); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lc-b[data-shape="outline"] .lc-edge { padding: max(2px, var(--bw)); background: var(--role); }
.lc-b[data-shape="cut"] {
  --c: 18px;
  --clip: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%);
  --clip-ring: polygon(evenodd, 0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%, 0 0,
    var(--bw) var(--bw), var(--bw) calc(100% - var(--bw)), calc(100% - var(--bw)) calc(100% - var(--bw)),
    calc(100% - var(--bw)) calc(var(--c) + var(--bw) * .41), calc(100% - var(--c) - var(--bw) * .41) var(--bw), var(--bw) var(--bw));
}
/* 18 Stairs — пиксельные ступени на углах (шаг --ps), кромка повторяет ступени */
.lc-b[data-shape="stairs"] {
  --ps: 4px;
  --clip: polygon(calc(var(--ps) * 2) calc(0px), calc(100% - var(--ps) * 2) calc(0px), calc(100% - var(--ps) * 2) calc(var(--ps) * 1), calc(100% - var(--ps) * 1) calc(var(--ps) * 1), calc(100% - var(--ps) * 1) calc(var(--ps) * 2), calc(100%) calc(var(--ps) * 2), calc(100%) calc(100% - var(--ps) * 2), calc(100% - var(--ps) * 1) calc(100% - var(--ps) * 2), calc(100% - var(--ps) * 1) calc(100% - var(--ps) * 1), calc(100% - var(--ps) * 2) calc(100% - var(--ps) * 1), calc(100% - var(--ps) * 2) calc(100%), calc(var(--ps) * 2) calc(100%), calc(var(--ps) * 2) calc(100% - var(--ps) * 1), calc(var(--ps) * 1) calc(100% - var(--ps) * 1), calc(var(--ps) * 1) calc(100% - var(--ps) * 2), calc(0px) calc(100% - var(--ps) * 2), calc(0px) calc(var(--ps) * 2), calc(var(--ps) * 1) calc(var(--ps) * 2), calc(var(--ps) * 1) calc(var(--ps) * 1), calc(var(--ps) * 2) calc(var(--ps) * 1));
  --clip-ring: polygon(evenodd, calc(var(--ps) * 2) calc(0px), calc(100% - var(--ps) * 2) calc(0px), calc(100% - var(--ps) * 2) calc(var(--ps) * 1), calc(100% - var(--ps) * 1) calc(var(--ps) * 1), calc(100% - var(--ps) * 1) calc(var(--ps) * 2), calc(100%) calc(var(--ps) * 2), calc(100%) calc(100% - var(--ps) * 2), calc(100% - var(--ps) * 1) calc(100% - var(--ps) * 2), calc(100% - var(--ps) * 1) calc(100% - var(--ps) * 1), calc(100% - var(--ps) * 2) calc(100% - var(--ps) * 1), calc(100% - var(--ps) * 2) calc(100%), calc(var(--ps) * 2) calc(100%), calc(var(--ps) * 2) calc(100% - var(--ps) * 1), calc(var(--ps) * 1) calc(100% - var(--ps) * 1), calc(var(--ps) * 1) calc(100% - var(--ps) * 2), calc(0px) calc(100% - var(--ps) * 2), calc(0px) calc(var(--ps) * 2), calc(var(--ps) * 1) calc(var(--ps) * 2), calc(var(--ps) * 1) calc(var(--ps) * 1), calc(var(--ps) * 2) calc(var(--ps) * 1), calc(var(--ps) * 2) calc(0px), calc(var(--ps) * 2 + var(--bw)) calc(0px + var(--bw)), calc(100% - var(--ps) * 2 - var(--bw)) calc(0px + var(--bw)), calc(100% - var(--ps) * 2 - var(--bw)) calc(var(--ps) * 1 + var(--bw)), calc(100% - var(--ps) * 1 - var(--bw)) calc(var(--ps) * 1 + var(--bw)), calc(100% - var(--ps) * 1 - var(--bw)) calc(var(--ps) * 2 + var(--bw)), calc(100% - var(--bw)) calc(var(--ps) * 2 + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--ps) * 2 - var(--bw)), calc(100% - var(--ps) * 1 - var(--bw)) calc(100% - var(--ps) * 2 - var(--bw)), calc(100% - var(--ps) * 1 - var(--bw)) calc(100% - var(--ps) * 1 - var(--bw)), calc(100% - var(--ps) * 2 - var(--bw)) calc(100% - var(--ps) * 1 - var(--bw)), calc(100% - var(--ps) * 2 - var(--bw)) calc(100% - var(--bw)), calc(var(--ps) * 2 + var(--bw)) calc(100% - var(--bw)), calc(var(--ps) * 2 + var(--bw)) calc(100% - var(--ps) * 1 - var(--bw)), calc(var(--ps) * 1 + var(--bw)) calc(100% - var(--ps) * 1 - var(--bw)), calc(var(--ps) * 1 + var(--bw)) calc(100% - var(--ps) * 2 - var(--bw)), calc(0px + var(--bw)) calc(100% - var(--ps) * 2 - var(--bw)), calc(0px + var(--bw)) calc(var(--ps) * 2 + var(--bw)), calc(var(--ps) * 1 + var(--bw)) calc(var(--ps) * 2 + var(--bw)), calc(var(--ps) * 1 + var(--bw)) calc(var(--ps) * 1 + var(--bw)), calc(var(--ps) * 2 + var(--bw)) calc(var(--ps) * 1 + var(--bw)));
  padding-left: calc(var(--bpx) + 3px); padding-right: calc(var(--bpx) + 3px);
}
/* медленное «перетекание» формы (только у последних сообщений) */
@keyframes lc-morph {
  0%, 100% { border-radius: calc(var(--r) * .6) calc(var(--r) * 2.6) calc(var(--r) * 1.4) calc(var(--r) * .5) / calc(var(--r) * 1.8) calc(var(--r) * 1.1) calc(var(--r) * 2.3) calc(var(--r) * .7); }
  33%      { border-radius: calc(var(--r) * 1.5) calc(var(--r) * 1.6) calc(var(--r) * .8) calc(var(--r) * 1.2) / calc(var(--r) * 1.2) calc(var(--r) * 2) calc(var(--r) * 1.4) calc(var(--r) * 1.5); }
  66%      { border-radius: calc(var(--r) * .9) calc(var(--r) * 2.1) calc(var(--r) * 2) calc(var(--r) * .7) / calc(var(--r) * 2.1) calc(var(--r) * .9) calc(var(--r) * 1.6) calc(var(--r) * 1.1); }
}
.cchat[data-morph="on"] .item:nth-last-child(-n+3) .lc-b[data-shape="liquid"] :is(.lc-shape, .lc-edge, .lc-fill),
.cchat[data-morph="on"] .item:nth-last-child(-n+3) .lc-b[data-shape="blob"] :is(.lc-shape, .lc-edge, .lc-fill) {
  animation: lc-morph 9s ease-in-out var(--id, 0s) infinite;
}

/* ==========================================================================
   7. Строка ника: иконка, значки, платформа, ник, время, плашка
   ========================================================================== */
.msg__head {
  position: relative; z-index: 2;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px;
  max-width: 100%;
  margin: 0 0 5px 6px;
  font-size: var(--fs-name);
  line-height: 1.15;
}
.cchat[data-align="right"] .lc-row > .msg__head { margin: 0 6px 5px 0; justify-content: flex-end; }
.lc-content .msg__head:not(.msg__head--inline) { display: flex; margin: 0 0 4px; }
.msg__name {
  font-family: var(--f-name); font-weight: var(--fw-name);
  letter-spacing: var(--ls-name); text-transform: var(--tt-name);
  color: var(--nc, var(--role));
  opacity: var(--op-name);
  text-shadow: var(--sh-name);
  overflow-wrap: anywhere;
}
.name--grad .msg__name { background: var(--name-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.msg__ic { color: var(--nc, var(--role)); filter: drop-shadow(0 0 3px var(--role)); }
.msg__rdeco { color: var(--role); font-size: .85em; filter: drop-shadow(0 0 3px var(--role)); }
.msg__time { font-family: var(--f-msg); font-size: var(--time-size); color: var(--time-c); opacity: var(--time-op); margin-left: 2px; font-weight: 600; white-space: nowrap; }
.msg__time--below { display: block; margin: 3px 8px 0; font-size: calc(var(--fs-name) * var(--time-size-n, .72)); }
.msg__time--inside { display: block; text-align: right; margin-top: 2px; font-size: calc(var(--fs) * .62); }
.cchat[data-time="off"] .msg__time { display: none; }
.msg__plat { width: var(--plat-s); height: var(--plat-s); background: var(--plat-c, currentColor); }

/* ник в строке сообщения: «Ник: сообщение» */
.msg__head--inline { display: inline; margin: 0; }
.msg__head--inline > * { vertical-align: middle; margin-right: .28em; }
.msg__head--inline .msg__colon { margin: 0 .3em 0 -.2em; color: var(--nc, var(--role)); font-family: var(--f-name); font-weight: var(--fw-name); }
.msg__head--inline .msg__badges { display: inline-flex; vertical-align: middle; }

/* ник «парит» на верхней кромке пузыря (в потоке — пузырь не бывает уже ника) */
.cchat[data-namepos="floating"] .msg .lc-b { margin-top: calc(var(--fs-name) * .9 + var(--fl-extra, 0px)); padding-top: calc(var(--bpy) + var(--fs-name) * .45); }
.cchat[data-namepos="floating"] .lc-content > .msg__head,
.cchat[data-namepos="floating"] .msg__main > .msg__head {
  position: relative; z-index: 5;
  display: flex; flex-wrap: nowrap; white-space: nowrap;
  width: -webkit-max-content; width: max-content; max-width: none;
  margin: calc((var(--bpy) + var(--fs-name) * 1.08 + 3px + var(--fl-extra, 0px)) * -1) 0 5px;
}
.cchat[data-align="right"][data-namepos="floating"] .lc-content > .msg__head { margin-left: auto; }

/* плашка под ником */
.cchat[data-plate="on"] .msg__head:not(.msg__head--inline) {
  background: var(--plate-bg); border-radius: var(--plate-r); padding: var(--plate-pad);
  border: var(--plate-border); box-shadow: var(--plate-shadow);
  -webkit-backdrop-filter: var(--plate-backdrop); backdrop-filter: var(--plate-backdrop);
}

.cchat[data-plate="on"][data-platestyle="pill"] .msg__head:not(.msg__head--inline) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 52%, rgba(0,0,0,.1));
}

/* значки: картинки платформы + подпись роли (v1) */
.msg__badges { display: inline-flex; align-items: center; gap: var(--badge-gap); opacity: var(--badge-op); filter: saturate(var(--badge-sat)); }
.msg__badges--above { flex-basis: 100%; }
.cchat[data-badges="off"] .msg__badges { display: none; }
.pbadge { width: var(--badge-s); height: var(--badge-s); object-fit: contain; border-radius: 3px; }
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px 1px 5px; border-radius: 6px;
  font-family: var(--f-name); font-size: .66em; font-weight: 700; letter-spacing: .06em; line-height: 1.5;
  color: var(--badge-ink, #fff);
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 52%, rgba(0,0,0,.14)), var(--role);
  box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.22);
}
.badge .ico { width: 1.05em; height: 1.05em; background: var(--badge-ink, #fff); }
.badge__img { width: 1.15em; height: 1.15em; object-fit: contain; }
.cchat[data-badgegrad="on"] .badge { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 50%, rgba(0,0,0,.12)), linear-gradient(135deg, var(--role), var(--accent-2)); }

/* ==========================================================================
   8. Текст, эмоуты, ответ
   ========================================================================== */
.msg__lines { display: flex; flex-direction: column; gap: .18em; }
.msg__text {
  font-family: var(--f-msg);
  font-size: calc(var(--fs) * var(--fscale, 1));
  font-weight: var(--fw);
  letter-spacing: var(--ls);
  color: var(--ink);
  opacity: var(--op-msg);
  text-shadow: var(--sh-msg);
  overflow-wrap: anywhere; word-break: normal;
}
.cchat[data-wrap="word"] .msg__text { overflow-wrap: break-word; }
.cchat[data-clamp="on"] .msg__text { display: -webkit-box; -webkit-line-clamp: var(--max-lines); -webkit-box-orient: vertical; overflow: hidden; }
.msg__text .emote { height: var(--emote-h); max-height: var(--emote-max); vertical-align: -.32em; margin: 0 var(--emote-gap); }
.cchat[data-emotealign="baseline"] .msg__text .emote { vertical-align: baseline; }
.cchat[data-emotealign="bottom"]   .msg__text .emote { vertical-align: text-bottom; }
.cchat[data-emotealign="top"]      .msg__text .emote { vertical-align: text-top; }
.msg--emotes-only .msg__line.is-emotes .emote { height: var(--emote-big); max-height: none; vertical-align: middle; }
.msg--action .msg__text { font-style: italic; color: var(--nc, var(--role)); }
.msg__line.is-new { animation: lc-line-in .45s var(--in-ease) both; }
.msg__line.is-out { animation: lc-line-out .3s ease forwards; }
@keyframes lc-line-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lc-line-out { to { opacity: 0; transform: translateX(-10px); } }

.msg__reply {
  display: -webkit-box; -webkit-line-clamp: var(--reply-lines, 1); -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 5px; padding: 2px 8px 2px .6em;
  border-left: 2px solid var(--accent); border-radius: 1px 8px 8px 1px;
  background: linear-gradient(90deg, var(--reply-bg, rgba(140,140,170,.13)), rgba(140,140,170,0) 92%);
  font-family: var(--f-msg); font-size: var(--reply-fs, .82em); line-height: 1.3;
  color: var(--sec); opacity: var(--reply-op, .7);
}
.msg__reply b { color: var(--role); font-weight: 700; }
.msg__reply-arrow { color: var(--accent); }

/* ==========================================================================
   9. Аватарка: кольцо снаружи (как в v1), форма, рамка-картинка
   ========================================================================== */
.msg__ava { position: relative; flex: none; width: var(--ava-size); height: var(--ava-size); margin: var(--ava-y) 0 0 var(--ava-x); opacity: var(--ava-op); filter: var(--ava-filter); }
.msg__ava-ring { position: absolute; inset: calc(var(--ava-ring-w) * -1); border-radius: 50%; background: var(--ava-ring); }
.msg__ava-in {
  position: absolute; inset: var(--ava-ring-w); border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--ava-bg); background-size: cover; background-position: center;
  color: #fff; font-family: var(--f-name); font-weight: 700; font-size: calc(var(--ava-size) * .42); line-height: 1;
}
.msg__ava--img { color: transparent; }
/* своя рамка-картинка: та же система координат, что у рамок Asset Library —
   холст 150% аватара, аватар = центральный круг 2/3 холста */
.msg__ava::after { content: ''; position: absolute; inset: -25%; z-index: 3; background: var(--ava-frame, none) center / contain no-repeat; pointer-events: none; }
.cchat[data-avshape="rounded"] :is(.msg__ava-ring, .msg__ava-in) { border-radius: 30%; }
.cchat[data-avshape="square"]  :is(.msg__ava-ring, .msg__ava-in) { border-radius: 10%; }
.cchat[data-avshape="bubble"]  :is(.msg__ava-ring, .msg__ava-in) { border-radius: 50% 50% 50% 14%; }
.cchat[data-avshape="blob"]    :is(.msg__ava-ring, .msg__ava-in) { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; }
.cchat[data-avshape="crystal"] :is(.msg__ava-ring, .msg__ava-in) { border-radius: 0; -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.cchat[data-avshape="hex"]     :is(.msg__ava-ring, .msg__ava-in) { border-radius: 0; -webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.cchat[data-avshape="heart"]   :is(.msg__ava-ring, .msg__ava-in) { border-radius: 0; -webkit-mask: var(--m-heart) center / 100% 100% no-repeat; mask: var(--m-heart) center / 100% 100% no-repeat; }
.cchat[data-avshape="star"]    :is(.msg__ava-ring, .msg__ava-in) { border-radius: 0; -webkit-mask: var(--m-star) center / 100% 100% no-repeat; mask: var(--m-star) center / 100% 100% no-repeat; }
.cchat[data-avshape="custom"]  :is(.msg__ava-ring, .msg__ava-in) { border-radius: 0; -webkit-mask: var(--ava-mask, var(--m-heart)) center / 100% 100% no-repeat; mask: var(--ava-mask, var(--m-heart)) center / 100% 100% no-repeat; }
.cchat[data-ava="off"] .msg__ava { display: none; }

/* аватарка «внахлёст» на угол пузыря */
.lc-b > .msg__ava { position: absolute; z-index: 5; top: calc(var(--ava-size) * -.32); left: calc(var(--ava-size) * -.5); margin: 0; }
.cchat[data-avplace="overlap"][data-ava="on"] .msg .lc-row { padding-left: calc(var(--ava-size) * .5); }
.cchat[data-avplace="overlap"][data-ava="on"] .msg .lc-b { padding-left: calc(var(--bpx) + var(--ava-size) * .5); }
.cchat[data-avplace="overlap"][data-ava="on"]:not([data-namepos="above"]):not([data-namepos="beside"]) .msg .lc-b { margin-top: calc(var(--ava-size) * .32); }
/* аватар внахлёст + ник на кромке: место и под аватар, и под ник (он может расти вверх) */
.cchat[data-avplace="overlap"][data-ava="on"][data-namepos="floating"]:not([data-namepos="above"]) .msg .lc-b { margin-top: max(calc(var(--ava-size) * .32), calc(var(--fs-name) * .9 + var(--fl-extra, 0px))); }
.cchat[data-avplace="overlap"][data-ava="on"] .msg .lc-row > .msg__head { margin-left: calc(var(--ava-size) * .55); }
.cchat[data-align="right"] .lc-b > .msg__ava { left: auto; right: calc(var(--ava-size) * -.5); }
.cchat[data-align="right"][data-avplace="overlap"][data-ava="on"] .msg .lc-row { padding-left: 0; padding-right: calc(var(--ava-size) * .5); }
.cchat[data-align="right"][data-avplace="overlap"][data-ava="on"] .msg .lc-b { padding-left: var(--bpx); padding-right: calc(var(--bpx) + var(--ava-size) * .5); }
.cchat[data-align="right"][data-avplace="overlap"][data-ava="on"] .msg .lc-row > .msg__head { margin-left: 0; margin-right: calc(var(--ava-size) * .55); }
.lc-content.has-ava > .msg__ava { margin-top: 2px; }

/* ==========================================================================
   10. Декор у сообщения (≤4 шт.) и разделители между сообщениями
   ========================================================================== */
.md {
  position: absolute; z-index: 4; display: block; pointer-events: none;
  width: calc(var(--md-s) * var(--sz, 1)); height: calc(var(--md-s) * var(--sz, 1));
  background: var(--md-c);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  opacity: var(--md-op);
  filter: var(--md-glow);
  --t: rotate(calc(var(--md-rot) + var(--jr, 0deg)));
  transform: var(--t);
  animation: md-twinkle 3.4s ease-in-out var(--dl, 0s) infinite;
}
.md.is-img { -webkit-mask: none; mask: none; background: var(--md-img, none) center / contain no-repeat; }
.md--mirror { --t: scaleX(-1) rotate(calc(var(--md-rot) + var(--jr, 0deg))); }
.md--tr { top: calc(var(--md-s) * -.45 - var(--md-off) + max(var(--jy, 0px), 0px)); right: calc(var(--md-s) * -.3 - var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s) * .95); }
.md--tl { top: calc(var(--md-s) * -.45 - var(--md-off) + max(var(--jy, 0px), 0px)); left: calc(var(--md-s) * -.3 - var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s) * .95); }
.md--br { bottom: calc(var(--md-s) * -.45 - var(--md-off) + var(--jy, 0px)); right: calc(var(--md-s) * -.3 - var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s) * .95); }
.md--bl { bottom: calc(var(--md-s) * -.45 - var(--md-off) + var(--jy, 0px)); left: calc(var(--md-s) * -.3 - var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s) * .95); }
.md--in.md--tr { top: calc(var(--md-off) + var(--jy, 0px)); right: calc(var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s)); opacity: calc(var(--md-op) * .55); }
.md--in.md--tl { top: calc(var(--md-off) + var(--jy, 0px)); left: calc(var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s)); opacity: calc(var(--md-op) * .55); }
.md--in.md--br { bottom: calc(var(--md-off) + var(--jy, 0px)); right: calc(var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s)); opacity: calc(var(--md-op) * .55); }
.md--in.md--bl { bottom: calc(var(--md-off) + var(--jy, 0px)); left: calc(var(--md-off) + var(--jx, 0px) + var(--i, 0) * var(--md-s)); opacity: calc(var(--md-op) * .55); }
.md--out.md--tr { top: calc(var(--md-s) * -1 - var(--md-off) + max(var(--jy, 0px), 0px)); right: calc(var(--md-s) * -1 - var(--md-off) + var(--jx, 0px)); }
.md--out.md--tl { top: calc(var(--md-s) * -1 - var(--md-off) + max(var(--jy, 0px), 0px)); left: calc(var(--md-s) * -1 - var(--md-off) + var(--jx, 0px)); }
.md--out.md--br { bottom: calc(var(--md-s) * -1 - var(--md-off) + var(--jy, 0px)); right: calc(var(--md-s) * -1 - var(--md-off) + var(--jx, 0px)); }
.md--out.md--bl { bottom: calc(var(--md-s) * -1 - var(--md-off) + var(--jy, 0px)); left: calc(var(--md-s) * -1 - var(--md-off) + var(--jx, 0px)); }
.md--tier { top: calc(-6px - var(--i, 0) * 4px); right: calc(10px + var(--i, 0) * 16px); --md-c: var(--tier-c, #fff); --md-s: 13px; opacity: .95; filter: drop-shadow(0 0 4px var(--tier-c, #fff)); }
@keyframes md-twinkle { 0%, 100% { opacity: calc(var(--md-op) * .55); transform: var(--t) scale(.82); } 50% { opacity: var(--md-op); transform: var(--t) scale(1.12); } }
@keyframes md-float   { 0%, 100% { transform: var(--t) translateY(0); } 50% { transform: var(--t) translateY(-4px); } }
@keyframes md-spin    { to { transform: var(--t) rotate(360deg); } }
@keyframes md-pulse   { 0%, 100% { transform: var(--t) scale(.8); } 50% { transform: var(--t) scale(1.18); } }
.cchat[data-mdanim="float"] .md { animation-name: md-float; }
.cchat[data-mdanim="spin"]  .md { animation: md-spin 6s linear infinite; }
.cchat[data-mdanim="pulse"] .md { animation-name: md-pulse; }
.cchat[data-mdanim="none"]  .md:not(.md--tier) { animation: none; }

/* разделитель между сообщениями (v1) */
.item + .item::before {
  content: ''; position: absolute; left: 50%;
  top: calc(var(--gap) / -2 - 1px); transform: translate(-50%, -50%);
  pointer-events: none; display: none;
}
.cchat[data-newest="top"] .item + .item::before { top: auto; bottom: calc(var(--gap) / -2 - 1px); transform: translate(-50%, 50%); }
.cchat:not([data-divider="off"]):not([data-divider="line"]):not([data-divider="dots"]) .item + .item::before {
  display: block; width: 15px; height: 15px; opacity: .85;
  background: var(--deco-col);
  filter: drop-shadow(0 0 4px var(--deco-col));
  -webkit-mask: var(--dm) center / contain no-repeat; mask: var(--dm) center / contain no-repeat;
}
.cchat[data-divider="line"] .item + .item::before {
  display: block; width: 72%; height: 2px; border-radius: 2px; opacity: .7;
  background: linear-gradient(90deg, transparent, var(--deco-col), transparent);
}
.cchat[data-divider="dots"] .item + .item::before {
  display: block; width: 60%; height: 4px; opacity: .78;
  background: radial-gradient(circle 1.6px at 50% 50%, var(--deco-col), transparent 70%);
  background-size: 13px 4px; background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* ==========================================================================
   11. События канала + уровни доната
   ========================================================================== */
.evt__bubble { padding: calc(var(--bpy) + 1px) calc(var(--bpx) + 1px); }
.evt__content { display: flex; align-items: center; gap: 13px; }
.evt__icon {
  position: relative; flex: none; width: 44px; height: 44px;
  display: grid; place-items: center; color: #fff;
  /* drop-shadow повторяет любую форму контейнера (круг, щит, звезда…) */
  filter: drop-shadow(0 0 7px var(--evt-glow, rgba(255,123,172,.4)));
}
.evt__iconbg {
  position: absolute; inset: 0; display: block; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 44%),
    linear-gradient(165deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.24) 100%),
    var(--evt-c, var(--accent));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34), inset 0 -3px 5px rgba(0,0,0,.14);
}
/* у форм с вырезом (clip-path / mask) внутренний ободок не нужен: он бы резался по габаритному прямоугольнику */
.cchat[data-evicon="hex"] .evt__iconbg, .cchat[data-evicon="shield"] .evt__iconbg, .cchat[data-evicon="diamond"] .evt__iconbg,
.cchat[data-evicon="pixel"] .evt__iconbg, .cchat[data-evicon="star"] .evt__iconbg, .cchat[data-evicon="burst"] .evt__iconbg,
.cchat[data-evicon="heart"] .evt__iconbg { box-shadow: none; }
.evt__icon > .ico { position: relative; z-index: 1; width: 22px; height: 22px; background: #fff; }
.evt__emoji { position: relative; z-index: 1; font-size: 22px; line-height: 1; }
.evt__body { min-width: 0; }
.evt__title {
  font-family: var(--f-evt); font-weight: var(--fw-evt, 700); font-size: var(--fs-evt-title, 11px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--evt-ct, var(--evt-c, var(--accent)));
}
.evt__name {
  font-family: var(--f-evt); font-weight: var(--fw-evt, 700); font-size: var(--fs-evt, 19px);
  letter-spacing: var(--ls-evt, 0); text-transform: var(--tt-evt, none);
  color: var(--ink); opacity: var(--op-evt, 1); text-shadow: var(--sh-evt, none);
  overflow-wrap: break-word; line-height: 1.2;      /* слово целиком, пока оно помещается; ломается только слишком длинное */
}
.evt__note { font-family: var(--f-msg); font-size: calc(var(--fs-evt, 19px) * .74); color: var(--ink); opacity: .72; overflow-wrap: break-word; }
.evt__text { font-family: var(--f-evt); font-size: calc(var(--fs-evt, 19px) * .86); color: var(--ink); line-height: 1.3; text-shadow: var(--sh-evt, none); overflow-wrap: break-word; }
.evt__hl { color: var(--evt-ct, var(--evt-c, var(--accent))); font-weight: 800; }
.cchat[data-events="off"] .evt { display: none; }

.evt--tier-crystal .lc-fill::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.35) 35%, rgba(190,230,255,.25) 48%, rgba(255,210,250,.2) 60%, rgba(255,255,255,0) 75%),
    var(--hi);
}
.evt--tier-special .lc-fx { background: linear-gradient(115deg, rgba(255,130,220,0) 15%, rgba(255,130,220,.28) 32%, rgba(140,220,255,.28) 50%, rgba(255,240,150,.28) 66%, rgba(255,240,150,0) 82%) 0 0 / 260% 100%; animation: lc-holo 3.2s linear infinite; }

/* ==========================================================================
   12. Подсветка, ключевые слова, пульсирующее свечение
   ========================================================================== */
/* слой-свечение под пузырём: пульсирует только opacity (дёшево) */
.lc-b::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--br);
  pointer-events: none; opacity: 0;
  box-shadow: 0 0 calc(var(--glow-s) * 2.3 + 6px) var(--pulse-c, var(--glow-c));
}
@keyframes lc-pulse { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }
.cchat[data-idle="glow"] .lc-b::before { animation: lc-pulse var(--idle-dur) ease-in-out var(--id, 0s) infinite; }
.cchat[data-hlanim="pulse"] .msg--hl .lc-b::before { --pulse-c: var(--hl-c); animation: lc-pulse 2.4s ease-in-out infinite; }
.cchat[data-hlanim="shine"] .msg--hl .lc-fx::before { display: block; }
.evt--tier-glow .lc-b::before, .evt--tier-special .lc-b::before, .evt--tier-crystal .lc-b::before { --pulse-c: var(--tier-c); animation: lc-pulse 2s ease-in-out infinite; }
.msg.kw--glow .lc-b::before { --pulse-c: var(--kw-c); animation: lc-pulse 1.8s ease-in-out infinite; }
.msg.kw--color .msg__text { color: var(--kw-c); }
.msg.kw--bounce .lc-b { animation: kw-bounce .9s cubic-bezier(.3,1.6,.5,1) 2; }
@keyframes kw-bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) scale(1.03); } 60% { transform: translateY(2px); } }
.msg.kw--sparkle .lc-b::after {
  content: ''; position: absolute; z-index: 5; top: -9px; right: -7px; width: 18px; height: 18px;
  background: var(--kw-c); pointer-events: none;
  -webkit-mask: var(--m-sparkle) center / contain no-repeat; mask: var(--m-sparkle) center / contain no-repeat;
  filter: drop-shadow(0 0 5px var(--kw-c));
  animation: kw-spark 1.6s ease-in-out infinite;
}
@keyframes kw-spark { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }

/* ==========================================================================
   13. Стекло: блик, пузырьки внутри, голография
   ========================================================================== */
.lc-fx { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; pointer-events: none; --ga: calc(var(--glint-angle) - 90deg); }
/* бегущий блик — включается из widget.js только у последних N сообщений */
.lc-fx::before {
  content: ''; display: none; position: absolute; top: -60%; bottom: -60%; left: 0; width: 36%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,var(--glint-op)), rgba(255,255,255,0));
  transform: translateX(-170%) rotate(var(--ga));
  animation: lc-glint var(--glint-dur) ease-in-out var(--gd, 0s) infinite;
}
@keyframes lc-glint { 0% { transform: translateX(-170%) rotate(var(--ga)); } 42%, 100% { transform: translateX(440%) rotate(var(--ga)); } }
/* пузырьки, всплывающие внутри стекла (v1) */
.cchat[data-glassbubbles="on"] .lc-fx::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200%;
  background-image:
    radial-gradient(circle 2.4px at 22% 92%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(circle 1.6px at 60% 82%, rgba(255,255,255,.5), transparent 62%),
    radial-gradient(circle 2px   at 80% 70%, rgba(255,255,255,.5), transparent 62%),
    radial-gradient(circle 2.4px at 22% 42%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(circle 1.6px at 60% 32%, rgba(255,255,255,.5), transparent 62%),
    radial-gradient(circle 2px   at 80% 20%, rgba(255,255,255,.5), transparent 62%);
  animation: glass-bubbles 7s linear infinite;
}
@keyframes glass-bubbles { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* голографический перелив — анимируется только у последних сообщений */
.cchat[data-holo="on"] .lc-fx {
  background: linear-gradient(115deg, rgba(255,130,220,0) 18%, rgba(255,130,220,calc(.3 * var(--iri-op))) 34%, rgba(140,220,255,calc(.3 * var(--iri-op))) 50%, rgba(255,240,150,calc(.26 * var(--iri-op))) 66%, rgba(255,240,150,0) 82%) 30% 0 / 260% 100%;
}
.cchat[data-holo="on"] .item:nth-last-child(-n+4) .lc-fx { animation: lc-holo 7s linear var(--gd, 0s) infinite; }
@keyframes lc-holo { from { background-position: 100% 0; } to { background-position: -160% 0; } }

/* ==========================================================================
   14. Появление и исчезание
   ========================================================================== */
.item > .lc-row { animation: lc-in-rise var(--in-dur) var(--in-ease) both; }
.cchat[data-appear="none"]    .item > .lc-row { animation: none; }
.cchat[data-appear="fade"]    .item > .lc-row { animation-name: lc-in-fade; }
.cchat[data-appear="slide"]   .item > .lc-row { animation-name: lc-in-slide; }
.cchat[data-appear="pop"]     .item > .lc-row { animation-name: lc-in-pop; }
.cchat[data-appear="bubble"]  .item > .lc-row { animation-name: lc-in-bubble; }
.cchat[data-appear="scale"]   .item > .lc-row { animation-name: lc-in-scale; }
.cchat[data-appear="float"]   .item > .lc-row { animation-name: lc-in-float; }
.cchat[data-appear="bounce"]  .item > .lc-row { animation-name: lc-in-bounce; }
.cchat[data-appear="liquid"]  .item > .lc-row { animation-name: lc-in-liquid; }
.cchat[data-appear="sparkle"] .item > .lc-row { animation-name: lc-in-sparkle; }
.cchat[data-appear="drop"]    .item > .lc-row { animation-name: lc-in-drop; }
.cchat[data-appear="unfold"]  .item > .lc-row { animation-name: lc-in-unfold; }
/* своя анимация события */
.cchat .item[data-anim="none"]    > .lc-row { animation: none; }
.cchat .item[data-anim="fade"]    > .lc-row { animation-name: lc-in-fade; }
.cchat .item[data-anim="rise"]    > .lc-row { animation-name: lc-in-rise; }
.cchat .item[data-anim="slide"]   > .lc-row { animation-name: lc-in-slide; }
.cchat .item[data-anim="pop"]     > .lc-row { animation-name: lc-in-pop; }
.cchat .item[data-anim="bubble"]  > .lc-row { animation-name: lc-in-bubble; }
.cchat .item[data-anim="scale"]   > .lc-row { animation-name: lc-in-scale; }
.cchat .item[data-anim="float"]   > .lc-row { animation-name: lc-in-float; }
.cchat .item[data-anim="bounce"]  > .lc-row { animation-name: lc-in-bounce; }
.cchat .item[data-anim="liquid"]  > .lc-row { animation-name: lc-in-liquid; }
.cchat .item[data-anim="sparkle"] > .lc-row { animation-name: lc-in-sparkle; }
.cchat .item[data-anim="drop"]    > .lc-row { animation-name: lc-in-drop; }
.cchat .item[data-anim="unfold"]  > .lc-row { animation-name: lc-in-unfold; }
.cchat .evt--tier-special > .lc-row { animation-name: lc-in-special; animation-duration: calc(var(--in-dur) * 1.5); }
/* перерисовка при смене настроек — без повторного появления */
.item.no-in:not(.is-out) > .lc-row { animation: none; }

.cchat .item.is-out > .lc-row { animation: lc-out-sink var(--out-dur) cubic-bezier(.4,.05,.6,.95) forwards; }
.cchat[data-disappear="fade"]     .item.is-out > .lc-row { animation-name: lc-out-fade; }
.cchat[data-disappear="slide"]    .item.is-out > .lc-row { animation-name: lc-out-slide; }
.cchat[data-disappear="shrink"]   .item.is-out > .lc-row { animation-name: lc-out-shrink; }
.cchat[data-disappear="dissolve"] .item.is-out > .lc-row { animation-name: lc-out-dissolve; }
.cchat[data-disappear="up"]       .item.is-out > .lc-row { animation-name: lc-out-up; }

@keyframes lc-in-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes lc-in-rise    { 0% { opacity: 0; transform: translateY(calc(22px * var(--k))) scale(calc(1 - .06 * var(--k))); } 60% { opacity: 1; transform: translateY(calc(-2px * var(--k))) scale(1.008); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-slide   { 0% { opacity: 0; transform: translate(var(--in-x), var(--in-y)) scale(.96); } 65% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-pop     { 0% { opacity: 0; transform: scale(calc(1 - .5 * var(--k))); } 55% { opacity: 1; transform: scale(calc(1 + .09 * var(--k))); } 78% { transform: scale(calc(1 - .02 * var(--k))); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-bubble  { 0% { opacity: 0; transform: translateY(calc(18px * var(--k))) scale(.15); } 50% { opacity: 1; transform: scale(calc(1 + .07 * var(--k))); } 70% { transform: scale(calc(1 - .03 * var(--k))); } 86% { transform: scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-scale   { 0% { opacity: 0; transform: scale(calc(1 - .22 * var(--k))); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-float   { 0% { opacity: 0; transform: translateY(calc(46px * var(--k))); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-bounce  { 0% { opacity: 0; transform: translateY(calc(34px * var(--k))); } 45% { opacity: 1; transform: translateY(calc(-8px * var(--k))); } 65% { transform: translateY(calc(4px * var(--k))); } 82% { transform: translateY(calc(-2px * var(--k))); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-liquid  { 0% { opacity: 0; transform: scale(.55, .25); } 35% { opacity: 1; transform: scale(calc(1 + .1 * var(--k)), calc(1 - .1 * var(--k))); } 55% { transform: scale(calc(1 - .05 * var(--k)), calc(1 + .07 * var(--k))); } 75% { transform: scale(calc(1 + .02 * var(--k)), calc(1 - .02 * var(--k))); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-sparkle { 0% { opacity: 0; transform: scale(.92); filter: brightness(1.9) saturate(1.3); } 55% { opacity: 1; filter: brightness(1.25); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes lc-in-drop    { 0% { opacity: 0; transform: translateY(calc(-30px * var(--k))) scale(.96); } 62% { opacity: 1; transform: translateY(calc(3px * var(--k))); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-unfold  { 0% { opacity: 0; transform: scaleY(.12) scaleX(.9); } 60% { opacity: 1; transform: scaleY(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-special { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 45% { opacity: 1; transform: scale(1.12) rotate(2deg); } 65% { transform: scale(.96) rotate(-1deg); } 82% { transform: scale(1.03); } 100% { opacity: 1; transform: none; } }

@keyframes lc-out-fade     { to { opacity: 0; } }
@keyframes lc-out-sink     { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(calc(16px * var(--k))) scale(.94); } }
@keyframes lc-out-slide    { to { opacity: 0; transform: translate(var(--out-x), var(--out-y)) scale(.93); } }
@keyframes lc-out-shrink   { to { opacity: 0; transform: scale(.32); } }
@keyframes lc-out-up       { to { opacity: 0; transform: translateY(calc(-28px * var(--k))) scale(.94); } }
@keyframes lc-out-dissolve { to { opacity: 0; transform: scale(1.06); filter: blur(9px); } }

/* ==========================================================================
   15. Постоянные (idle) анимации пузыря (v1). Фаза у каждого своя (--id).
   ========================================================================== */
@keyframes idle-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes idle-breathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.02); filter: brightness(1.06); } }
@keyframes idle-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes idle-sway    { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes idle-tilt    { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes idle-jelly   { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.04, .96); } 60% { transform: scale(.98, 1.02); } }
.cchat[data-idle="pulse"]   .lc-b { animation: idle-pulse   var(--idle-dur) ease-in-out var(--id, 0s) infinite; }
.cchat[data-idle="breathe"] .lc-b { animation: idle-breathe var(--idle-dur) ease-in-out var(--id, 0s) infinite; }
.cchat[data-idle="float"]   .lc-b { animation: idle-float   var(--idle-dur) ease-in-out var(--id, 0s) infinite; }
.cchat[data-idle="sway"]    .lc-b { animation: idle-sway    var(--idle-dur) ease-in-out var(--id, 0s) infinite; }
.cchat[data-idle="tilt"]    .lc-b { animation: idle-tilt    var(--idle-dur) ease-in-out var(--id, 0s) infinite; }
.cchat[data-idle="jelly"]   .lc-b { animation: idle-jelly   var(--idle-dur) ease-in-out var(--id, 0s) infinite; }

/* ==========================================================================
   15b. ASSET LIBRARY — рамки, плашки, орнаменты, разделители, стили частей
   Всё, что окружает сообщение, растёт вместе с ним: углы — отдельные
   плитки, края — повторяемые (9-slice маска), линия — CSS-рамка.
   ========================================================================== */
/* --- рамка-орнамент пузыря / события --- */
.lc-b.has-frame { --bpx: calc(var(--bpx0, 15px) + var(--fr-pad, 0px)); --bpy: calc(var(--bpy0, 11px) + var(--fr-pad, 0px)); margin: var(--fr-out, 0px); }
.lc-b.has-emblem { margin-top: calc(var(--fr-out, 0px) + var(--fr-s, 20px) * .62); }
/* безопасная зона: рамка и эмблема никогда не рисуются поверх ника, значков, текста,
   эмоутов, времени и ответа — содержимое всегда выше слоя рамки */
.lc-b.has-frame > .lc-content { z-index: 6; }
.lc-b.has-frame > .msg__ava { z-index: 7; }
/* эмблема (корона, бант) заходит внутрь пузыря — верхний отступ не меньше её высоты */
.lc-b.has-emblem:not([data-kind="mask"]) { padding-top: max(var(--bpy), calc(var(--fr-s, 20px) * .7 - var(--fr-o, 5px) + 4px)); }
.lc-frame {
  position: absolute; z-index: 5; display: block; pointer-events: none;
  inset: calc(var(--fr-o, 5px) * -1);
  color: var(--accent); opacity: var(--fr-op, 1); filter: var(--fr-filter, none);
}
.lc-frame::before {
  content: ''; position: absolute; display: var(--fr-line, none);
  inset: calc(var(--fr-s, 20px) * var(--fr-li, 0));
  border-style: var(--fr-ls, solid); border-color: currentColor; border-width: var(--fr-bw, 1px);
  border-radius: max(0px, calc((var(--r) + var(--fr-o, 5px) - var(--fr-s, 20px) * var(--fr-li, 0)) * var(--fr-lr, 1)));
}
.lc-frame::after { content: ''; position: absolute; inset: 0; background: var(--fr-bg, currentColor); }
.lc-frame__em {
  position: absolute; display: block; left: 50%;
  top: calc(var(--fr-s, 20px) * -.6); width: calc(var(--fr-s, 20px) * 1.3); height: calc(var(--fr-s, 20px) * 1.3);
  margin-left: calc(var(--fr-s, 20px) * -.65); background: var(--fr-bg, currentColor);
}
/* у фигурных форм (clip/mask) линия по прямоугольнику не нужна — остаются орнаменты */
.lc-b[data-kind="clip"] > .lc-frame::before, .lc-b[data-kind="mask"] > .lc-frame::before { display: none; }
.cchat[data-frpaint="accent2"] .lc-frame { color: var(--accent-2); }
.cchat[data-frpaint="role"] .lc-frame { color: var(--role); }
.cchat[data-frpaint="border"] .lc-frame { color: var(--fr-border); }
.cchat[data-frpaint="white"] .lc-frame { color: #fff; }
.cchat[data-frpaint="custom"] .lc-frame { color: var(--fr-custom); }
.cchat[data-frpaint="gradient"] .lc-frame { --fr-bg: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cchat[data-frpaint="holo"] .lc-frame { color: #e9d9ff; --fr-bg: linear-gradient(125deg, #ffc2ea 0%, #cdbfff 28%, #a9e3ff 52%, #d2ffe8 74%, #ffe9b8 100%); }
.cchat[data-evfrpaint="event"] .evt .lc-frame { color: var(--evt-c, var(--accent)); --fr-bg: currentColor; }
.cchat[data-evfrpaint="accent"] .evt .lc-frame { color: var(--accent); --fr-bg: currentColor; }
.cchat[data-evfrpaint="white"] .evt .lc-frame { color: #fff; --fr-bg: currentColor; }
.cchat .evt[class*="evt--tier-"] .lc-frame { color: var(--tier-c, var(--accent)); --fr-bg: currentColor; }
.cchat[data-frlayer="back"] .lc-frame { z-index: -1; }
.cchat[data-frmirror="on"] .msg .lc-frame::after { transform: scaleX(-1); }
@keyframes fr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
.cchat[data-franim="pulse"] .item:nth-last-child(-n+3) .lc-frame::after { animation: fr-pulse 2.8s ease-in-out var(--id, 0s) infinite; }

/* --- рамка аватарки: холст 150% аватара, аватар — центральный круг 2/3.
       Одинаковая система координат у всех рамок → аватар не сдвигается --- */
.msg__ava { color: var(--accent); }
.msg__ava[data-avf]::before {
  content: ''; position: absolute; inset: -25%; z-index: 3; pointer-events: none;
  /* материал рамки: верхне-левый блик и тень снизу поверх цвета (без filter) */
  background: linear-gradient(142deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,0) 62%, rgba(0,0,0,.24) 100%), var(--avf-bg, currentColor);
  -webkit-mask: var(--avf-m) center / 100% 100% no-repeat; mask: var(--avf-m) center / 100% 100% no-repeat;
  opacity: var(--avf-op, 1);
}
.cchat[data-avfpaint="accent2"] .msg__ava { color: var(--accent-2); }
.cchat[data-avfpaint="role"] .msg__ava { color: var(--role); }
.cchat[data-avfpaint="ring"] .msg__ava { color: var(--ava-ring); }
.cchat[data-avfpaint="white"] .msg__ava { color: #fff; }
.cchat[data-avfpaint="custom"] .msg__ava { color: var(--avf-custom); }
.cchat[data-avfpaint="gradient"] .msg__ava { --avf-bg: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cchat[data-avfpaint="holo"] .msg__ava { color: #e9d9ff; --avf-bg: linear-gradient(125deg, #ffc2ea 0%, #cdbfff 28%, #a9e3ff 52%, #d2ffe8 74%, #ffe9b8 100%); }
.cchat[data-avfmirror="on"] .msg__ava::before { transform: scaleX(-1); }
/* место под выступающую рамку: отодвигаем соседа, а не аватар */
.cchat[data-avplace="outside"] .msg__ava[data-avf] { margin-right: calc(var(--ava-size) * .2); }
.cchat[data-align="right"][data-avplace="outside"] .msg__ava[data-avf] { margin-right: 0; margin-left: calc(var(--ava-size) * .2); }
.lc-content.has-ava > .msg__ava[data-avf] { margin-right: calc(var(--ava-size) * .2); }
/* точка статуса */
.msg__dot { position: absolute; z-index: 4; right: 1%; bottom: 1%; width: 26%; height: 26%; border-radius: 50%; background: var(--dot-c, #5ee08a); box-shadow: 0 0 0 2px var(--ava-ring, #fff); display: block; }
.cchat[data-dot="role"] .msg__dot { --dot-c: var(--role); }
.cchat[data-dot="accent"] .msg__dot { --dot-c: var(--accent); }
.cchat[data-dot="custom"] .msg__dot { --dot-c: var(--dot-custom); }

/* --- плашка ника: края 9-slice, середина тянется под любую длину ника и значков --- */
.cchat[data-plate="on"]:not([data-platestyle="pill"]) .msg__head:not(.msg__head--inline) {
  background: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-style: solid; border-color: transparent; border-width: 0 var(--pl-cap);
  border-image: var(--pl-img) 0 12 0 12 fill / 0 var(--pl-cap) stretch;
  padding: var(--pl-py, 3px) 3px;
  filter: var(--pl-filter, none);
}
/* плашка обнимает содержимое; если места мало — значки и время уходят на вторую строку,
   плашка растёт в высоту (края тянутся), а ник не сжимается в столбик по букве */
.cchat[data-plate="on"]:not([data-platestyle="pill"]) .lc-row > .msg__head,
.cchat[data-plate="on"]:not([data-platestyle="pill"]) .lc-content .msg__head:not(.msg__head--inline) {
  flex-wrap: wrap; row-gap: 1px; width: -webkit-fit-content; width: fit-content; max-width: 100%;
}
.cchat[data-align="right"][data-plate="on"]:not([data-platestyle="pill"]) .lc-content .msg__head:not(.msg__head--inline) { margin-left: auto; }
.cchat[data-plate="on"]:not([data-platestyle="pill"]) .msg__head:not(.msg__head--inline) > :not(.msg__name) { flex: none; }
/* ник «на кромке пузыря» — в пределах ширины пузыря. Не помещается в одну строку —
   значки, ник и время переносятся, а плашка растёт ВВЕРХ (--fl-extra считает fitFloatingHead):
   нижняя строка остаётся на кромке, внутрь пузыря ничего не заходит, ник не обрезается */
.cchat[data-namepos="floating"] .msg .lc-content > .msg__head:not(.msg__head--inline),
.cchat[data-namepos="floating"] .msg .msg__main > .msg__head:not(.msg__head--inline) { flex-wrap: wrap; white-space: normal; row-gap: 1px; max-width: 100%; }
.cchat[data-namepos="floating"] .msg .lc-content > .msg__head.is-oneline:not(.msg__head--inline),
.cchat[data-namepos="floating"] .msg .msg__main > .msg__head.is-oneline:not(.msg__head--inline) { flex-wrap: nowrap; white-space: nowrap; }
.cchat[data-namepos="floating"] .msg .msg__head:not(.msg__head--inline) > * { flex: none; }
.cchat[data-namepos="floating"] .msg .msg__head:not(.msg__head--inline) > .msg__name { flex: 0 1 auto; min-width: 0; }
/* эмблема рамки уходит вниз, чтобы не встречаться с ником на верхней кромке */
.cchat[data-namepos="floating"] .msg .lc-frame__em { top: auto; bottom: calc(var(--fr-s, 20px) * -.6); }
.cchat[data-namepos="floating"] .msg .lc-b.has-emblem { margin-bottom: calc(var(--fr-out, 0px) + var(--fr-s, 20px) * .62); }
.cchat[data-namepos="floating"] .msg .lc-b.has-emblem:not([data-kind="mask"]) { padding-bottom: max(var(--bpy), calc(var(--fr-s, 20px) * .7 - var(--fr-o, 5px) + 4px)); }
.cchat[data-plate="on"] .msg__head .msg__name { min-width: 0; }
.cchat[data-plate="on"] .msg__head:not(.msg__head--inline) .msg__name { color: var(--nc-pl, var(--nc, var(--role))); }
.cchat[data-plate="on"] .msg__head:not(.msg__head--inline) .msg__time { color: var(--time-pl, var(--time-c)); }
.cchat[data-platetint="role"][data-plate="on"]:not([data-platestyle="pill"]) .msg__head:not(.msg__head--inline) .msg__name { color: #fff; }
.cchat[data-platetint="role"][data-plate="on"]:not([data-platestyle="pill"]) .msg { --orn-c: #fff; }

/* --- орнаменты по бокам ника (в потоке — не перекрывают текст; длинный ник
       переносится между орнаментами, а не выталкивает их на другие строки) --- */
.msg[data-orn] .msg__name { display: inline-flex; align-items: center; max-width: 100%; }
.msg[data-orn] .msg__head--inline .msg__name { display: inline; }
.msg[data-orn] .msg__name::before, .msg[data-orn] .msg__name::after {
  content: ''; display: inline-block; vertical-align: -.14em; flex: none;
  width: var(--orn-s, .9em); height: var(--orn-s, .9em); margin: 0 .24em;
  background: var(--orn-c, var(--role));
  -webkit-mask: var(--orn-m) center / contain no-repeat; mask: var(--orn-m) center / contain no-repeat;
}
.msg[data-orn] .msg__name::after { transform: scaleX(-1); }
.cchat[data-ornside="left"] .msg[data-orn] .msg__name::after,
.cchat[data-ornside="right"] .msg[data-orn] .msg__name::before { display: none; }
.cchat[data-ornpaint="accent"] .msg { --orn-c: var(--accent); }
.cchat[data-ornpaint="accent2"] .msg { --orn-c: var(--accent-2); }
.cchat[data-ornpaint="custom"] .msg { --orn-c: var(--orn-custom); }
.cchat[data-ornpaint="name"] .msg { --orn-c: var(--nc, var(--role)); }

/* --- подчёркивание ника (text-decoration — растёт с ником, без картинок) --- */
.cchat:not([data-ul="none"]) .msg__name { text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .24em; text-decoration-skip-ink: none; }
.cchat[data-ul="wavy"] .msg__name { text-decoration-style: wavy; }
.cchat[data-ul="dotted"] .msg__name { text-decoration-style: dotted; text-decoration-thickness: 2px; }
.cchat[data-ul="dashed"] .msg__name { text-decoration-style: dashed; }
.cchat[data-ul="double"] .msg__name { text-decoration-style: double; text-decoration-thickness: 3px; }
.cchat[data-ul="taper"] .msg__name, .cchat[data-ul="prism"] .msg__name, .cchat[data-ul="rail"] .msg__name { text-decoration: none; padding-bottom: 2px; background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; }
.cchat[data-ul="taper"] .msg__name { background-image: linear-gradient(90deg, var(--accent), rgba(255,255,255,0) 96%); }
.cchat[data-ul="prism"] .msg__name { background-image: linear-gradient(90deg, #ffc2ea, #cdbfff 32%, #aee4ff 62%, #d2ffe8 82%, rgba(255,240,192,0)); }
.cchat[data-ul="rail"] .msg__name { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 36% 2px; }

/* --- метка у первого сообщения зрителя --- */
.msg__label {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-family: var(--f-name); font-size: .62em; font-weight: 800; letter-spacing: .08em; line-height: 1.5;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* --- контейнер значков --- */
.cchat[data-badgebox="pill"] .msg__badges { padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.cchat[data-badgebox="glass"] .msg__badges { padding: 2px 6px; border-radius: 999px; background: linear-gradient(170deg, rgba(255,255,255,.5), rgba(255,255,255,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.12); }
.cchat[data-badgebox="outline"] .msg__badges { padding: 1px 5px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cchat[data-badgebox="crystal"] .msg__badges { padding: 2px 7px; border-radius: 0; background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.2) 48%, rgba(255,255,255,.4) 100%);
  -webkit-clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); }
.cchat[data-badgebox="pearl"] .msg__badges { padding: 2px 7px; border-radius: 999px; background: linear-gradient(120deg, rgba(255,214,240,.78), rgba(214,200,255,.74) 45%, rgba(190,236,255,.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 3px rgba(60,40,100,.16); }
.cchat[data-badgebox="holo"] .msg__badges { padding: 1px 6px; border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(rgba(22,18,44,.55), rgba(22,18,44,.55)) padding-box, linear-gradient(120deg, #ffc8ee, #cdbfff 35%, #b4e8ff 65%, #ffe9b8) border-box; }
.cchat[data-badgebox="dark"] .msg__badges { padding: 2px 6px; border-radius: 7px; background: rgba(10,8,22,.58); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* --- стили ответа (reply) --- */
.cchat[data-replystyle="quote"] .msg__reply { padding: 3px 8px; border-left-width: 3px; border-radius: 3px 8px 8px 3px; background: rgba(140,140,180,.16); }
.cchat[data-replystyle="thread"] .msg__reply { border-left: 0; padding-left: 0; }
.cchat[data-replystyle="thread"] .msg__reply-arrow {
  display: inline-block; width: .85em; height: .6em; margin: 0 .3em 0 .1em; vertical-align: .08em;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); border-bottom-left-radius: 6px;
  color: transparent; overflow: hidden;
}
.cchat[data-replystyle="chip"] .msg__reply { display: -webkit-inline-box; max-width: 100%; padding: 1px 9px; border-left: 0; border-radius: 999px; background: rgba(140,140,180,.16); box-shadow: inset 0 0 0 1px var(--accent); }

/* --- сообщение только из эмоутов --- */
.cchat[data-emoteonly="none"] .msg--emotes .lc-shape, .cchat[data-emoteonly="none"] .msg--emotes .lc-tail, .cchat[data-emoteonly="none"] .msg--emotes .lc-frame,
.cchat[data-emoteonly="halo"] .msg--emotes .lc-shape, .cchat[data-emoteonly="halo"] .msg--emotes .lc-tail, .cchat[data-emoteonly="halo"] .msg--emotes .lc-frame,
.cchat[data-emoteonly="sparkle"] .msg--emotes .lc-shape, .cchat[data-emoteonly="sparkle"] .msg--emotes .lc-tail, .cchat[data-emoteonly="sparkle"] .msg--emotes .lc-frame { display: none; }
.cchat[data-emoteonly="none"] .msg--emotes .lc-b { --bpx: 2px; --bpy: 2px; margin: 0; }
.cchat[data-emoteonly="bubble"] .msg--emotes .lc-b { --bpx: max(8px, calc(var(--bpx0, 14px) * .6)); --bpy: max(5px, calc(var(--bpy0, 10px) * .55)); }
.cchat[data-emoteonly="bubble"] .msg--emotes .lc-tail, .cchat[data-emoteonly="bubble"] .msg--emotes .lc-frame { display: none; }
.cchat[data-emoteonly="halo"] .msg--emotes .lc-b, .cchat[data-emoteonly="sparkle"] .msg--emotes .lc-b { --bpx: 10px; --bpy: 6px; margin: 0; }
.cchat[data-emoteonly="halo"] .msg--emotes .lc-content { background: radial-gradient(closest-side, var(--halo-c, rgba(255,255,255,.5)), rgba(255,255,255,0)); }
.cchat[data-emoteonly="pill"] .msg--emotes .lc-b { --br: 999px; --bpx: 14px; --bpy: 4px; }
.cchat[data-emoteonly="sparkle"] .msg--emotes .lc-content::before,
.cchat[data-emoteonly="sparkle"] .msg--emotes .lc-content::after {
  content: ''; position: absolute; width: 14px; height: 14px; background: var(--accent); pointer-events: none;
  -webkit-mask: var(--m-sparkle) center / contain no-repeat; mask: var(--m-sparkle) center / contain no-repeat;
}
.cchat[data-emoteonly="sparkle"] .msg--emotes .lc-content::before { top: -6px; left: -8px; }
.cchat[data-emoteonly="sparkle"] .msg--emotes .lc-content::after { bottom: -4px; right: -8px; width: 10px; height: 10px; }

/* --- тематические разделители: мотив по центру + линия с разрывом --- */
.cchat[data-sep="on"]:not([data-divider="off"]):not([data-divider="line"]):not([data-divider="dots"]) .item + .item::before {
  display: block; width: 72%; height: 14px; opacity: .85;
  background: var(--deco-col); filter: none;
  -webkit-mask: var(--sep-m) center / auto 100% no-repeat,
    var(--sep-line, linear-gradient(90deg, transparent, #000 14%, #000 calc(50% - 36px), transparent calc(50% - 31px), transparent calc(50% + 31px), #000 calc(50% + 36px), #000 86%, transparent)) center / 100% 1.5px no-repeat;
          mask: var(--sep-m) center / auto 100% no-repeat,
    var(--sep-line, linear-gradient(90deg, transparent, #000 14%, #000 calc(50% - 36px), transparent calc(50% - 31px), transparent calc(50% + 31px), #000 calc(50% + 36px), #000 86%, transparent)) center / 100% 1.5px no-repeat;
}

/* режимы разделителя: тихий (меньше и прозрачнее) и ритм (каждый третий) */
.cchat[data-dvmode="subtle"] .item + .item::before { opacity: .38 !important; height: 10px !important; }
.cchat[data-dvmode="rhythm"] .item + .item[data-dv="0"]::before { display: none !important; }

/* --- форма контейнера иконки события --- */
.cchat[data-evicon="squircle"] .evt__iconbg { border-radius: 30%; }
.cchat[data-evicon="hex"] .evt__iconbg { border-radius: 0; -webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.cchat[data-evicon="shield"] .evt__iconbg { border-radius: 0; -webkit-clip-path: polygon(50% 0, 96% 14%, 92% 58%, 50% 100%, 8% 58%, 4% 14%); clip-path: polygon(50% 0, 96% 14%, 92% 58%, 50% 100%, 8% 58%, 4% 14%); }
.cchat[data-evicon="diamond"] .evt__iconbg { border-radius: 0; -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cchat[data-evicon="pixel"] .evt__iconbg { border-radius: 0; -webkit-clip-path: polygon(20% 0, 80% 0, 80% 10%, 90% 10%, 90% 20%, 100% 20%, 100% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 100%, 20% 100%, 20% 90%, 10% 90%, 10% 80%, 0 80%, 0 20%, 10% 20%, 10% 10%, 20% 10%); clip-path: polygon(20% 0, 80% 0, 80% 10%, 90% 10%, 90% 20%, 100% 20%, 100% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 100%, 20% 100%, 20% 90%, 10% 90%, 10% 80%, 0 80%, 0 20%, 10% 20%, 10% 10%, 20% 10%); }
.cchat[data-evicon="star"] .evt__iconbg { border-radius: 0; inset: -4px; -webkit-mask: var(--m-star) center / 100% 100% no-repeat; mask: var(--m-star) center / 100% 100% no-repeat; }
.cchat[data-evicon="burst"] .evt__iconbg { border-radius: 0; inset: -5px; -webkit-mask: var(--m-sun) center / 100% 100% no-repeat; mask: var(--m-sun) center / 100% 100% no-repeat; }
.cchat[data-evicon="heart"] .evt__iconbg { border-radius: 0; inset: -3px; -webkit-mask: var(--m-heart) center / 100% 100% no-repeat; mask: var(--m-heart) center / 100% 100% no-repeat; }
.cchat[data-evicon="diamond"] .evt__icon > .ico, .cchat[data-evicon="star"] .evt__icon > .ico,
.cchat[data-evicon="burst"] .evt__icon > .ico, .cchat[data-evicon="heart"] .evt__icon > .ico { width: 17px; height: 17px; }
.cchat[data-evicon="heart"] .evt__icon > .ico { margin-top: -3px; }

/* --- рамка и заголовок общей панели --- */
.panel-frame {
  position: absolute; z-index: 2; display: none; pointer-events: none; color: var(--accent); opacity: var(--pf-op, .85);
  top: calc(var(--safe-t) + var(--ct-inset) - var(--pf-o, 0px)); right: calc(var(--safe-r) + var(--ct-inset) - var(--pf-o, 0px));
  bottom: calc(var(--safe-b) + var(--ct-inset) - var(--pf-o, 0px)); left: calc(var(--safe-l) + var(--ct-inset) - var(--pf-o, 0px));
}
.cchat[data-pf="on"] .panel-frame { display: block; }
.panel-frame::before {
  content: ''; position: absolute; display: var(--pf-line, none); inset: calc(var(--pf-s, 28px) * var(--pf-li, 0));
  border: var(--pf-lw, 1px) var(--pf-ls, solid) currentColor;
  border-radius: max(0px, calc(var(--ct-r) + var(--pf-o, 0px) - var(--pf-s, 28px) * var(--pf-li, 0)));
}
.panel-frame::after { content: ''; position: absolute; inset: 0; background: var(--pf-bg, currentColor); -webkit-mask-box-image: var(--pf-mb, none); }
.cchat[data-pfpaint="accent2"] .panel-frame { color: var(--accent-2); }
.cchat[data-pfpaint="white"] .panel-frame { color: #fff; }
.cchat[data-pfpaint="custom"] .panel-frame { color: var(--pf-custom); }
.cchat[data-pfpaint="gradient"] .panel-frame { --pf-bg: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.panel-title {
  position: absolute; z-index: 4; display: none; left: 50%; top: calc(var(--safe-t) + var(--ct-inset));
  transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font-family: var(--f-name); font-weight: 800; font-size: calc(var(--fs-name) * 1.05); letter-spacing: .1em; line-height: 1.2;
  color: var(--pt-text, #3b2f5c);
}
.panel-title[hidden] { display: none !important; }
.cchat[data-pt="pill"] .panel-title { display: block; padding: 4px 14px; border-radius: 999px; background: var(--pt-bg, #fff); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.cchat[data-pt="img"] .panel-title {
  display: block; padding: 4px 4px; border-style: solid; border-color: transparent; border-width: 0 var(--pl-cap);
  border-image: var(--pt-img) 0 12 0 12 fill / 0 var(--pl-cap) stretch;
}
.cchat[data-ptalign="left"] .panel-title { left: calc(var(--safe-l) + var(--ct-inset) + 18px); transform: translateY(-50%); }
.cchat[data-ptalign="right"] .panel-title { left: auto; right: calc(var(--safe-r) + var(--ct-inset) + 18px); transform: translateY(-50%); }

/* ==========================================================================
   15c. Композиция сообщения: строка ника, роли, группировка, события
   ========================================================================== */
/* --- одна строка: длинный ник обрезается «…», значки и время не уезжают на
       вторую строку и не разваливают плашку (полный ник — в title) --- */
.msg__head:not(.msg__head--inline) { flex-wrap: nowrap; }
.msg__head:not(.msg__head--inline) > * { flex: none; }
.msg__head:not(.msg__head--inline) > .msg__name { flex: 0 1 auto; min-width: 3.2em; display: flex; align-items: center; }
.msg__nt {
  display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .2em 2px; margin: -.2em 0;            /* запас под тень/обводку текста — overflow её не режет */
}
.msg__head.no-time .msg__time { display: none; }
.msg__head.is-tight .badge--ico .badge__t { display: none; }
.msg__head.is-tight .badge--ico { padding: 2px 4px; }
/* ник в строке сообщения («Ник: текст») — обычный инлайн, без блока и обрезки */
.msg__head--inline .msg__nt { display: inline; overflow: visible; white-space: normal; padding: 0; margin: 0; text-overflow: clip; }
.msg__head--inline .msg__name { display: inline; flex: none; }
/* плашка обнимает содержимое, но не шире строки */
.cchat[data-plate="on"]:not([data-platestyle="pill"]) .lc-row > .msg__head,
.cchat[data-plate="on"]:not([data-platestyle="pill"]) .lc-content .msg__head:not(.msg__head--inline) { flex-wrap: nowrap; }
.cchat[data-namepos="floating"] .msg .lc-content > .msg__head:not(.msg__head--inline),
.cchat[data-namepos="floating"] .msg .msg__main > .msg__head:not(.msg__head--inline) { flex-wrap: nowrap; white-space: nowrap; max-width: 100%; }
.msg[data-orn] .msg__name { max-width: 100%; }

/* --- система ролей: ненавязчивые отметки у ролей, зависят от общего дизайна ---
   значения (--rail-*, цвета кромки, свечение, тон) раскладывает widget.js по ролям */
.cchat[data-rolemark~="rail"] .msg .lc-b { padding-left: calc(var(--bpx) + var(--rail-pad, 0px)); }
.cchat[data-rolemark~="rail"][data-align="right"] .msg .lc-b { padding-left: var(--bpx); padding-right: calc(var(--bpx) + var(--rail-pad, 0px)); }
.cchat[data-rolemark~="rail"] .msg .lc-content::before {
  content: ''; display: var(--rail-d, none); position: absolute; z-index: 4; pointer-events: none;
  left: calc(var(--bpx) * -1 + min(8px, var(--bpx) * .5)); top: calc(var(--bpy) * -1 + min(9px, var(--bpy) * .8)); bottom: calc(var(--bpy) * -1 + min(9px, var(--bpy) * .8));
  width: var(--rail-w, 3px); border-radius: 4px;
  background: var(--role); opacity: var(--rail-o, .9);
}
.cchat[data-rolemark~="rail"][data-align="right"] .msg .lc-content::before { left: auto; right: calc(var(--bpx) * -1 + min(8px, var(--bpx) * .5)); }
.cchat[data-rolemark~="rail"][data-avplace="overlap"][data-ava="on"] .msg .lc-content::before { display: none; }
.cchat[data-rolemark~="rail"][data-avplace="overlap"][data-ava="on"] .msg .lc-b { padding-left: calc(var(--bpx) + var(--ava-size) * .5); }
/* подчёркивание ника цветом роли (только у ролей с весом) */
.cchat[data-rolemark~="name"] .msg .msg__nt { border-bottom: var(--nm-w, 0px) solid var(--role); padding-bottom: calc(.2em + var(--nm-w, 0px)); margin-bottom: calc(-.2em - var(--nm-w, 0px)); }

.cchat[data-mdtop="on"][data-namepos="above"] .lc-row > .msg__head,
.cchat[data-mdtop="on"][data-namepos="beside"] .lc-row > .msg__head { margin-bottom: var(--md-top-pad, 5px); }

/* --- группировка: подряд идущие сообщения одного зрителя без повторного ника
       и аватарки (место сохраняется, строка не «пляшет») --- */
.msg--cont { margin-top: calc(var(--gap) * -.55); }
.cchat[data-newest="top"] .msg--cont { margin-top: 0; margin-bottom: calc(var(--gap) * -.55); }
.msg--cont .lc-row > .msg__head, .msg--cont .lc-content > .msg__head { display: none; }
.msg--cont .lc-row > .msg__ava, .msg--cont .lc-content > .msg__ava { visibility: hidden; }
.msg--cont .lc-b > .msg__ava { display: none; }
.msg--cont .msg__time--below { display: none; }
.cchat[data-namepos="floating"] .msg--cont .lc-b { margin-top: 0; padding-top: var(--bpy); }
.cchat[data-avplace="overlap"][data-ava="on"] .msg--cont .lc-b { margin-top: 0; }

/* --- иконка события «как у аватарки»: та же форма и размер --- */
.cchat[data-evicon="avatar"] .evt__icon { width: clamp(38px, var(--ava-size, 44px), 58px); height: clamp(38px, var(--ava-size, 44px), 58px); }
.cchat[data-evicon="avatar"][data-avshape="rounded"] .evt__iconbg { border-radius: 30%; }
.cchat[data-evicon="avatar"][data-avshape="square"] .evt__iconbg { border-radius: 10%; }
.cchat[data-evicon="avatar"][data-avshape="bubble"] .evt__iconbg { border-radius: 50% 50% 50% 14%; }
.cchat[data-evicon="avatar"][data-avshape="blob"] .evt__iconbg { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; }
.cchat[data-evicon="avatar"][data-avshape="crystal"] .evt__iconbg { border-radius: 0; -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.cchat[data-evicon="avatar"][data-avshape="hex"] .evt__iconbg { border-radius: 0; -webkit-clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.cchat[data-evicon="avatar"][data-avshape="heart"] .evt__iconbg { border-radius: 0; -webkit-mask: var(--m-heart) center / 100% 100% no-repeat; mask: var(--m-heart) center / 100% 100% no-repeat; }
.cchat[data-evicon="avatar"][data-avshape="star"] .evt__iconbg { border-radius: 0; -webkit-mask: var(--m-star) center / 100% 100% no-repeat; mask: var(--m-star) center / 100% 100% no-repeat; }

/* --- «спокойный» вход при шквале сообщений: короткий fade вместо длинных эффектов --- */
@keyframes lc-in-settle { 0% { opacity: 0; transform: translateY(calc(9px * var(--k))); } 100% { opacity: 1; transform: none; } }
.cchat[data-appear="settle"] .item > .lc-row { animation-name: lc-in-settle; }
.cchat .item[data-anim="settle"] > .lc-row { animation-name: lc-in-settle; }
.cchat .item.is-calm:not(.is-out) > .lc-row { animation-name: lc-in-fade; animation-duration: .16s; animation-timing-function: ease-out; }

/* --- бюджет живых эффектов: бесконечные анимации и размытие — только у последних
       N сообщений (N — performance.liveItems, правило добавляет widget.js) --- */

/* ==========================================================================
   16. Выключатели: анимации, Performance Mode
   ========================================================================== */
.cchat[data-anim="off"] *,
.cchat[data-anim="off"] *::before,
.cchat[data-anim="off"] *::after { animation: none !important; }

.cchat[data-perf="on"] .lc-fill,
.cchat[data-perf="on"] .panel,
.cchat[data-perf="on"] .msg__head { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cchat[data-perf="on"] .deco span,
.cchat[data-perf="on"] .md,
.cchat[data-perf="on"] .msg__ic,
.cchat[data-perf="on"] .msg__rdeco { filter: none !important; }
.cchat[data-perf="on"] .lc-fx { display: none; }
.cchat[data-perf="on"] .lc-frame, .cchat[data-perf="on"] .msg__head { filter: none !important; }
.cchat[data-perf="on"] .lc-frame::after { animation: none !important; }
.cchat[data-perf="on"] .deco span,
.cchat[data-perf="on"] .md { animation-duration: 8s; }

/* ==========================================================================
   16. Арт-семейства: формы, ответы, эмоуты, эффекты, движение, панели
   ========================================================================== */
.lc-b[data-shape="shard"] {
  --c: max(8px, calc(var(--r) * .7));
  --clip: polygon(calc(var(--c) * 1.5) 0, calc(100% - var(--c) * 0.4) 0, 100% calc(var(--c) * 0.55), 100% calc(100% - var(--c) * 1.8), calc(100% - var(--c) * 2) 100%, calc(var(--c) * 0.5) 100%, 0 calc(100% - var(--c) * 0.5), 0 calc(var(--c) * 1.2));
  --clip-ring: polygon(evenodd, calc(var(--c) * 1.5) 0, calc(100% - var(--c) * 0.4) 0, 100% calc(var(--c) * 0.55), 100% calc(100% - var(--c) * 1.8), calc(100% - var(--c) * 2) 100%, calc(var(--c) * 0.5) 100%, 0 calc(100% - var(--c) * 0.5), 0 calc(var(--c) * 1.2), calc(var(--c) * 1.5) 0, calc(var(--c) * 1.5 + var(--bw)) var(--bw), calc(100% - var(--c) * 0.4 - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(var(--c) * 0.55 + var(--bw)), calc(100% - var(--bw)) calc(100% - var(--c) * 1.8 - var(--bw)), calc(100% - var(--c) * 2 - var(--bw)) calc(100% - var(--bw)), calc(var(--c) * 0.5 + var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--c) * 0.5 - var(--bw)), var(--bw) calc(var(--c) * 1.2 + var(--bw)));
  padding-left: calc(var(--bpx) + 5px); padding-right: calc(var(--bpx) + 5px);
}
.lc-b[data-shape="bracket"] {
  --c: max(8px, calc(var(--r) * .7));
  --clip: polygon(calc(var(--c) * 1) 0, calc(100% - var(--c) * 3.4) 0, calc(100% - var(--c) * 3.1) calc(var(--c) * 0.5), calc(100% - var(--c) * 1.6) calc(var(--c) * 0.5), calc(100% - var(--c) * 1.3) 0, 100% 0, 100% calc(100% - var(--c) * 1), calc(100% - var(--c) * 1) 100%, 0 100%, 0 calc(var(--c) * 1));
  --clip-ring: polygon(evenodd, calc(var(--c) * 1) 0, calc(100% - var(--c) * 3.4) 0, calc(100% - var(--c) * 3.1) calc(var(--c) * 0.5), calc(100% - var(--c) * 1.6) calc(var(--c) * 0.5), calc(100% - var(--c) * 1.3) 0, 100% 0, 100% calc(100% - var(--c) * 1), calc(100% - var(--c) * 1) 100%, 0 100%, 0 calc(var(--c) * 1), calc(var(--c) * 1) 0, calc(var(--c) * 1 + var(--bw)) var(--bw), calc(100% - var(--c) * 3.4 - var(--bw)) var(--bw), calc(100% - var(--c) * 3.1 - var(--bw)) calc(var(--c) * 0.5 + var(--bw)), calc(100% - var(--c) * 1.6 - var(--bw)) calc(var(--c) * 0.5 + var(--bw)), calc(100% - var(--c) * 1.3 - var(--bw)) var(--bw), calc(100% - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(100% - var(--c) * 1 - var(--bw)), calc(100% - var(--c) * 1 - var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--bw)), var(--bw) calc(var(--c) * 1 + var(--bw)));
  padding-top: calc(var(--bpy) + 2px);
}
.lc-b[data-shape="notch"] {
  --c: max(8px, calc(var(--r) * .7));
  --clip: polygon(calc(var(--c) * 0.5) 0, calc(100% - var(--c) * 0.5) 0, 100% calc(var(--c) * 0.5), 100% calc(50% - var(--c) * 0.55), calc(100% - var(--c) * 0.55) 50%, 100% calc(50% - var(--c) * -0.55), 100% calc(100% - var(--c) * 0.5), calc(100% - var(--c) * 0.5) 100%, calc(var(--c) * 0.5) 100%, 0 calc(100% - var(--c) * 0.5), 0 calc(50% - var(--c) * -0.55), calc(var(--c) * 0.55) 50%, 0 calc(50% - var(--c) * 0.55), 0 calc(var(--c) * 0.5));
  --clip-ring: polygon(evenodd, calc(var(--c) * 0.5) 0, calc(100% - var(--c) * 0.5) 0, 100% calc(var(--c) * 0.5), 100% calc(50% - var(--c) * 0.55), calc(100% - var(--c) * 0.55) 50%, 100% calc(50% - var(--c) * -0.55), 100% calc(100% - var(--c) * 0.5), calc(100% - var(--c) * 0.5) 100%, calc(var(--c) * 0.5) 100%, 0 calc(100% - var(--c) * 0.5), 0 calc(50% - var(--c) * -0.55), calc(var(--c) * 0.55) 50%, 0 calc(50% - var(--c) * 0.55), 0 calc(var(--c) * 0.5), calc(var(--c) * 0.5) 0, calc(var(--c) * 0.5 + var(--bw)) var(--bw), calc(100% - var(--c) * 0.5 - var(--bw)) var(--bw), calc(100% - var(--bw)) calc(var(--c) * 0.5 + var(--bw)), calc(100% - var(--bw)) calc(50% - var(--c) * 0.55), calc(100% - var(--c) * 0.55 - var(--bw)) 50%, calc(100% - var(--bw)) calc(50% - var(--c) * -0.55), calc(100% - var(--bw)) calc(100% - var(--c) * 0.5 - var(--bw)), calc(100% - var(--c) * 0.5 - var(--bw)) calc(100% - var(--bw)), calc(var(--c) * 0.5 + var(--bw)) calc(100% - var(--bw)), var(--bw) calc(100% - var(--c) * 0.5 - var(--bw)), var(--bw) calc(50% - var(--c) * -0.55), calc(var(--c) * 0.55 + var(--bw)) 50%, var(--bw) calc(50% - var(--c) * 0.55), var(--bw) calc(var(--c) * 0.5 + var(--bw)));
  padding-left: calc(var(--bpx) + 8px); padding-right: calc(var(--bpx) + 8px);
}

/* layered — слоёная капсула: две смещённые «подложки» за пузырём */
.lc-b[data-shape="layered"] { --br: calc(var(--r) * 1.7); margin: 0 9px 9px 0; padding-left: calc(var(--bpx) + 4px); padding-right: calc(var(--bpx) + 4px); }
.lc-b[data-shape="layered"] .lc-fill { box-shadow: var(--fsh), 4px 4px 0 -1px var(--halo-c, rgba(255,255,255,.3)), 8px 8px 0 -2px var(--halo-c, rgba(255,255,255,.2)); }
/* leaf — лист: две острые и две круглые вершины, зеркально по выравниванию */
.lc-b[data-shape="leaf"] { --br: calc(var(--r) * 1.9) calc(var(--r) * .28) calc(var(--r) * 1.9) calc(var(--r) * .28); padding-left: calc(var(--bpx) + 3px); padding-right: calc(var(--bpx) + 3px); }
.cchat[data-align="right"] .lc-b[data-shape="leaf"] { --br: calc(var(--r) * .28) calc(var(--r) * 1.9) calc(var(--r) * .28) calc(var(--r) * 1.9); }
/* plush — мягкая игрушка: объёмная форма и стежок по краю */
.lc-b[data-shape="plush"] { --br: calc(var(--r) * 1.55); padding: calc(var(--bpy) + 3px) calc(var(--bpx) + 5px); }
.lc-b[data-shape="plush"] .lc-fill { outline: 1.5px dashed rgba(255,255,255,.75); outline-offset: -5px; }
/* editorial — тонкая рамка с акцентной линейкой слева */
.lc-b[data-shape="editorial"] { --br: 1px; padding-left: calc(var(--bpx) + 8px); }
.lc-b[data-shape="editorial"] .lc-fill { box-shadow: var(--fsh), inset 2px 0 0 var(--accent); }

/* --- ответ: новые оформления (компактные) --- */
.cchat[data-replystyle="plate"] .msg__reply { margin: -2px 0 6px; padding: 3px 10px 3px 9px; border-left: 0; border-radius: 7px; background: var(--reply-surf, rgba(150,150,180,.2)); box-shadow: 0 3px 8px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.3); }
.cchat[data-replystyle="liquid"] .msg__reply { padding: 3px 11px; border-left: 0; border-radius: 13px 5px 13px 5px; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.03)); box-shadow: inset 0 1.5px 2px rgba(0,0,0,.16), inset 0 -1px 0 rgba(255,255,255,.4); }
.cchat[data-replystyle="holo"] .msg__reply { padding: 0 2px 4px; border-left: 0; border-radius: 0; background: linear-gradient(90deg, #ffc2ea, #cdbfff 38%, #a9e3ff 70%, rgba(210,255,232,0)) left bottom / 100% 1.6px no-repeat; }
.cchat[data-replystyle="crystal"] .msg__reply { position: relative; padding: 1px 4px 1px 15px; border-left: 0; border-radius: 0; }
.cchat[data-replystyle="crystal"] .msg__reply::before { content: ''; position: absolute; left: 1px; top: .2em; width: 8px; height: 11px; background: var(--accent);
  -webkit-clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); }
.cchat[data-replystyle="crystal"] .msg__reply::after { content: ''; position: absolute; left: 1px; top: .2em; width: 4px; height: 11px; background: rgba(255,255,255,.4);
  -webkit-clip-path: polygon(100% 38%, 100% 100%, 50% 100%, 0 38%, 50% 0); clip-path: polygon(50% 0, 50% 100%, 0 38%); }
.cchat[data-replystyle="card"] .msg__reply { padding: 4px 9px; border-left: 3px solid var(--accent); border-radius: 3px 7px 7px 3px; background: rgba(150,150,180,.12); box-shadow: inset 0 0 0 1px rgba(150,150,180,.28); }
.cchat[data-replystyle="cyber"] .msg__reply { position: relative; padding: 3px 9px 3px 14px; border-left: 0; border-radius: 0; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px var(--accent);
  -webkit-clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.cchat[data-replystyle="cyber"] .msg__reply::before { content: ''; position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--accent); }
.cchat[data-replystyle="pixel"] .msg__reply { padding: 3px 9px; border-left: 3px solid var(--accent); border-radius: 0; background: rgba(0,0,0,.16);
  -webkit-clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); }

/* --- сообщение из одних эмоутов: «парящие» и «с подписью» --- */
.cchat[data-emoteonly="float"] .msg--emotes .lc-shape, .cchat[data-emoteonly="float"] .msg--emotes .lc-tail, .cchat[data-emoteonly="float"] .msg--emotes .lc-frame,
.cchat[data-emoteonly="label"] .msg--emotes .lc-shape, .cchat[data-emoteonly="label"] .msg--emotes .lc-tail, .cchat[data-emoteonly="label"] .msg--emotes .lc-frame { display: none; }
.cchat[data-emoteonly="float"] .msg--emotes .lc-b, .cchat[data-emoteonly="label"] .msg--emotes .lc-b { --bpx: 4px; --bpy: 2px; margin: 0; }
.cchat[data-emoteonly="float"] .msg--emotes .emote { filter: drop-shadow(0 4px 5px rgba(0,0,0,.3)); }
.cchat[data-emoteonly="float"] .msg--emotes .msg__head { transform: scale(.88); transform-origin: left center; opacity: .92; }
.cchat[data-emoteonly="label"] .msg--emotes .msg__head { font-size: .78em; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.cchat[data-emoteonly="label"] .msg--emotes .lc-content { padding-bottom: 4px; background: linear-gradient(90deg, var(--halo-c, rgba(255,255,255,.4)), rgba(255,255,255,0) 70%) left bottom / 100% 1px no-repeat; }
@keyframes emote-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cchat[data-emoteonly="float"] .item.msg--emotes:nth-last-child(-n+3) .emote { animation: emote-bob 3.8s ease-in-out var(--id, 0s) infinite; }

/* --- библиотека эффектов: независимые слои внутри заливки ---
   --fxi — сила 0..1, --fxs — множитель скорости; активны только у последних N сообщений (см. performance.liveItems) */
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lc-fxl { position: absolute; inset: 0; display: block; pointer-events: none; opacity: var(--fxi, .5); }
.lc-fxl--liquid { background: radial-gradient(60% 150% at 0% -30%, rgba(255,255,255,.6), rgba(255,255,255,0) 62%) 0 0 / 170% 100% no-repeat, radial-gradient(40% 80% at 100% 125%, rgba(255,255,255,.3), rgba(255,255,255,0) 70%);
  animation: fxl-liquid calc(11s / var(--fxs, 1)) ease-in-out infinite alternate; }
@keyframes fxl-liquid { from { background-position: 0% 0, 0 0; } to { background-position: 100% 0, 0 0; } }
.lc-fxl--pearl { background: linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,205,238,.5) 34%, rgba(214,198,255,.5) 46%, rgba(188,232,255,.5) 58%, rgba(255,255,255,0) 74%) 0 0 / 280% 100% no-repeat;
  animation: fxl-sweep calc(10s / var(--fxs, 1)) linear infinite; }
@keyframes fxl-sweep { from { background-position: 120% 0; } to { background-position: -90% 0; } }
.lc-fxl--caustic { background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.4) 0 1.4px, rgba(255,255,255,0) 4.5px) 0 0 / 23px 19px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.3) 0 1.2px, rgba(255,255,255,0) 4px) 0 0 / 17px 15px;
  animation: fxl-caustic calc(16s / var(--fxs, 1)) linear infinite; }
@keyframes fxl-caustic { from { background-position: 0 0, 0 0; } to { background-position: 46px 19px, -34px 30px; } }
.lc-fxl--bloom { background: radial-gradient(120% 150% at 50% 50%, rgba(255,255,255,0) 52%, var(--halo-c, rgba(255,255,255,.35)) 100%); animation: fxl-bloom calc(6s / var(--fxs, 1)) ease-in-out infinite alternate; }
@keyframes fxl-bloom { from { opacity: calc(var(--fxi, .5) * .35); } to { opacity: var(--fxi, .5); } }
.lc-fxl--spark { padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--fxa), rgba(255,255,255,0) 0 82%, rgba(255,255,255,.95) 92%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxl-orbit calc(6s / var(--fxs, 1)) linear infinite; }
@keyframes fxl-orbit { to { --fxa: 360deg; } }
.lc-fxl--scan { background: linear-gradient(180deg, rgba(150,240,255,0), rgba(150,240,255,.55) 50%, rgba(150,240,255,0)) 0 -60% / 100% 55% no-repeat; animation: fxl-scan calc(5s / var(--fxs, 1)) linear infinite; }
@keyframes fxl-scan { from { background-position: 0 -60%; } 70%, to { background-position: 0 160%; } }
.lc-fxl--flicker { background: repeating-conic-gradient(rgba(255,255,255,.45) 0 25%, rgba(255,255,255,0) 0 50%) 0 0 / 6px 6px; animation: fxl-flick calc(3s / var(--fxs, 1)) steps(1) infinite; }
@keyframes fxl-flick { 0%, 100% { opacity: 0; } 10% { opacity: var(--fxi, .5); } 14% { opacity: 0; } 52% { opacity: calc(var(--fxi, .5) * .6); } 56% { opacity: 0; } }
.lc-fxl--dust { background: radial-gradient(circle, rgba(255,246,190,.9) 0 1px, rgba(255,246,190,0) 2.4px) 0 0 / 41px 37px, radial-gradient(circle, rgba(220,255,220,.7) 0 .8px, rgba(220,255,220,0) 2px) 0 0 / 29px 31px;
  animation: fxl-dust calc(18s / var(--fxs, 1)) linear infinite; }
@keyframes fxl-dust { from { background-position: 0 0, 0 0; } to { background-position: 12px -74px, -9px -62px; } }
.lc-fxl--stars { background: linear-gradient(90deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.95) 35% 65%, rgba(255,255,255,0) 65%) 6px 8px / 44px 1.4px no-repeat, linear-gradient(rgba(255,255,255,0) 35%, rgba(255,255,255,.95) 35% 65%, rgba(255,255,255,0) 65%) 6px 8px / 1.4px 44px no-repeat;
  background-repeat: repeat; background-size: 47px 47px; animation: fxl-twinkle calc(4.2s / var(--fxs, 1)) ease-in-out infinite alternate; }
.lc-fxl--stars { background-image: radial-gradient(circle at 14px 12px, rgba(255,255,255,.95) 0 1px, rgba(255,255,255,0) 2.6px), radial-gradient(circle at 35px 33px, rgba(255,255,255,.8) 0 .8px, rgba(255,255,255,0) 2.2px); background-size: 47px 47px, 47px 47px; }
@keyframes fxl-twinkle { from { opacity: calc(var(--fxi, .5) * .25); } to { opacity: var(--fxi, .5); } }
.lc-fxl--evsweep { background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%) -120% 0 / 60% 100% no-repeat; opacity: 1; animation: fxl-once 1.15s ease-out .15s 1 both; }
@keyframes fxl-once { from { background-position: -80% 0; } to { background-position: 220% 0; } }

/* --- микро-анимации: свет по рамке аватарки, мерцание значков ролей, события --- */
@property --afa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cchat[data-avfx="orbit"] .item:nth-last-child(-n+6) .msg__ava[data-avf]::after {
  content: ''; position: absolute; inset: -25%; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--afa), rgba(255,255,255,0) 0 88%, rgba(255,255,255,.95) 96%, rgba(255,255,255,0) 100%);
  -webkit-mask: var(--avf-m) center / 100% 100% no-repeat; mask: var(--avf-m) center / 100% 100% no-repeat;
  animation: avf-orbit 6.5s linear var(--id, 0s) infinite;
}
@keyframes avf-orbit { to { --afa: 360deg; } }
@keyframes avf-pulse { 0%, 100% { opacity: calc(var(--avf-op, 1) * .72); } 50% { opacity: var(--avf-op, 1); } }
.cchat[data-avfx="pulse"] .item:nth-last-child(-n+6) .msg__ava[data-avf]::before { animation: avf-pulse 4.4s ease-in-out var(--id, 0s) infinite; }
.cchat[data-rolemotion] .badge { position: relative; overflow: hidden; }
@keyframes badge-shine { 0%, 62% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
.cchat[data-rolemotion]:not([data-rolemotion="off"]) .item:nth-last-child(-n+8) .msg[data-role="vip"] .badge::after,
.cchat[data-rolemotion]:not([data-rolemotion="off"]) .item:nth-last-child(-n+8)[data-role="vip"] .badge::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 62%);
  animation: badge-shine 6.5s ease-in-out var(--id, 0s) infinite;
}
.cchat[data-rolemotion="full"] .item:nth-last-child(-n+8)[data-role="moderator"] .badge::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(235,245,255,.75) 50%, rgba(255,255,255,0) 58%);
  animation: badge-shine 10.5s linear var(--id, 0s) infinite;
}
.cchat[data-rolemotion="full"] .item:nth-last-child(-n+8)[data-role="broadcaster"] .msg__ava[data-avf]::after {
  content: ''; position: absolute; inset: -25%; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--afa), rgba(255,255,255,0) 0 90%, rgba(255,240,190,.95) 97%, rgba(255,255,255,0) 100%);
  -webkit-mask: var(--avf-m) center / 100% 100% no-repeat; mask: var(--avf-m) center / 100% 100% no-repeat;
  animation: avf-orbit 8s linear infinite;
}
@keyframes evt-icon-pop { 0% { transform: scale(.35) rotate(-14deg); opacity: 0; } 55% { transform: scale(1.18) rotate(4deg); opacity: 1; } 80% { transform: scale(.95); } 100% { transform: none; } }
@keyframes evt-rim { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.cchat[data-evmotion="pop"] .evt .evt__icon { animation: evt-icon-pop .75s cubic-bezier(.2,1.3,.4,1) .12s 1 both; }
.cchat[data-evmotion="rim"] .evt .lc-edge { animation: evt-rim 1.5s ease-out .1s 1 both; }

/* --- анимации появления / исчезновения: новые языки движения --- */
.cchat .item[data-anim="liquidrise"]       > .lc-row { animation-name: lc-in-liquidrise; }
.cchat .item[data-anim="softfloat"]        > .lc-row { animation-name: lc-in-softfloat; }
.cchat .item[data-anim="glassreveal"]      > .lc-row { animation-name: lc-in-glassreveal; }
.cchat .item[data-anim="crystalassemble"] > .lc-row { animation-name: lc-in-crystalassemble; }
.cchat .item[data-anim="holofade"]         > .lc-row { animation-name: lc-in-holofade; }
.cchat .item[data-anim="cyberscan"]        > .lc-row { animation-name: lc-in-cyberscan; animation-timing-function: steps(9, end); }
.cchat .item[data-anim="pixelbuild"]       > .lc-row { animation-name: lc-in-pixelbuild; animation-timing-function: steps(6, end); }
.cchat .item[data-anim="elastic"]          > .lc-row { animation-name: lc-in-elastic; }
@keyframes lc-in-liquidrise { 0% { opacity: 0; transform: translateY(calc(26px * var(--k))) scale(.9, .72); } 40% { opacity: 1; transform: translateY(calc(-4px * var(--k))) scale(calc(1 + .05 * var(--k)), calc(1 + .08 * var(--k))); } 68% { transform: scale(calc(1 - .02 * var(--k)), calc(1 - .03 * var(--k))); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-softfloat  { 0% { opacity: 0; transform: translateY(calc(14px * var(--k))) rotate(-.7deg); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-glassreveal { 0% { opacity: .35; -webkit-clip-path: inset(-26px 100% -26px -26px); clip-path: inset(-26px 100% -26px -26px); filter: brightness(1.45); } 100% { opacity: 1; -webkit-clip-path: inset(-26px); clip-path: inset(-26px); filter: none; } }
@keyframes lc-in-crystalassemble { 0% { opacity: 0; transform: scale(.9) rotate(-1.6deg); -webkit-clip-path: polygon(50% 38%, 62% 50%, 50% 62%, 38% 50%); clip-path: polygon(50% 38%, 62% 50%, 50% 62%, 38% 50%); }
  60% { opacity: 1; transform: scale(1.01); -webkit-clip-path: polygon(-30px -30px, calc(100% + 30px) -30px, calc(100% + 30px) calc(100% + 30px), -30px calc(100% + 30px)); clip-path: polygon(-30px -30px, calc(100% + 30px) -30px, calc(100% + 30px) calc(100% + 30px), -30px calc(100% + 30px)); }
  100% { opacity: 1; transform: none; -webkit-clip-path: polygon(-30px -30px, calc(100% + 30px) -30px, calc(100% + 30px) calc(100% + 30px), -30px calc(100% + 30px)); clip-path: polygon(-30px -30px, calc(100% + 30px) -30px, calc(100% + 30px) calc(100% + 30px), -30px calc(100% + 30px)); } }
@keyframes lc-in-holofade { 0% { opacity: 0; transform: scale(.985); filter: hue-rotate(80deg) saturate(1.8) brightness(1.3); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes lc-in-cyberscan { 0% { opacity: 1; -webkit-clip-path: inset(-26px 100% -26px -26px); clip-path: inset(-26px 100% -26px -26px); filter: brightness(1.6); } 100% { -webkit-clip-path: inset(-26px); clip-path: inset(-26px); filter: none; } }
@keyframes lc-in-pixelbuild { 0% { opacity: 1; -webkit-clip-path: inset(100% -26px -26px -26px); clip-path: inset(100% -26px -26px -26px); } 100% { opacity: 1; -webkit-clip-path: inset(-26px); clip-path: inset(-26px); } }
@keyframes lc-in-elastic { 0% { opacity: 0; transform: scale(.2, .2); } 38% { opacity: 1; transform: scale(calc(1 + .13 * var(--k)), calc(1 - .1 * var(--k))); } 58% { transform: scale(calc(1 - .06 * var(--k)), calc(1 + .07 * var(--k))); } 78% { transform: scale(calc(1 + .02 * var(--k)), calc(1 - .015 * var(--k))); } 100% { opacity: 1; transform: none; } }
.cchat[data-disappear="liquiddrop"] .item.is-out > .lc-row { animation-name: lc-out-liquiddrop; }
.cchat[data-disappear="glassfade"]  .item.is-out > .lc-row { animation-name: lc-out-glassfade; }
.cchat[data-disappear="pixelbreak"] .item.is-out > .lc-row { animation-name: lc-out-pixelbreak; animation-timing-function: steps(5, end); }
.cchat[data-disappear="softshrink"] .item.is-out > .lc-row { animation-name: lc-out-softshrink; }
@keyframes lc-out-liquiddrop { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(calc(26px * var(--k))) scale(.95, 1.16); } }
@keyframes lc-out-glassfade  { to { opacity: 0; filter: blur(5px) brightness(1.3); transform: scale(.985); } }
@keyframes lc-out-pixelbreak { to { opacity: 0; -webkit-clip-path: inset(100% -26px -26px -26px); clip-path: inset(100% -26px -26px -26px); transform: translateY(8px); } }
@keyframes lc-out-softshrink { to { opacity: 0; transform: scale(.82) translateY(6px); } }

/* --- семейства панели (поверх обычных настроек «Панель чата») --- */
.cchat[data-pfam="floating"] .panel { box-shadow: 0 18px 44px -10px rgba(10,20,50,.45), inset 0 1px 0 rgba(255,255,255,.55); }
.cchat[data-pfam="floating"] .panel::before { background: radial-gradient(130% 60% at 28% -18%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%), var(--ct-hi, none); }
.cchat[data-pfam="showcase"] .panel::before { background: linear-gradient(135deg, rgba(255,255,255,.34) 0 11%, rgba(255,255,255,0) 11.4%), linear-gradient(315deg, rgba(255,255,255,.16) 0 9%, rgba(255,255,255,0) 9.4%), linear-gradient(100deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.1) 60.4% 72%, rgba(255,255,255,0) 72.4%), var(--ct-hi, none); }
.cchat[data-pfam="editorial"] .panel { box-shadow: none; }
.cchat[data-pfam="editorial"] .panel::before { background: linear-gradient(var(--accent), var(--accent)) 14px 12px / 44px 2px no-repeat, linear-gradient(rgba(150,150,170,.45), rgba(150,150,170,.45)) 14px 12px / calc(100% - 28px) 1px no-repeat, var(--ct-hi, none); }
.cchat[data-pfam="holosheet"] .panel::before { background: linear-gradient(118deg, rgba(255,205,238,.2), rgba(214,198,255,.18) 30%, rgba(188,232,255,.2) 58%, rgba(255,240,206,.14)), linear-gradient(108deg, rgba(255,255,255,0) 42%, rgba(176,228,255,.18) 47%, rgba(255,186,238,.16) 51%, rgba(255,255,255,0) 56%), var(--ct-hi, none); }
.cchat[data-pfam="botanical"] .panel::before { background: radial-gradient(70% 40% at 0% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%), radial-gradient(60% 40% at 100% 100%, rgba(190,255,215,.2), rgba(190,255,215,0) 70%), var(--ct-hi, none); }
.cchat[data-pfam="screen"] .panel::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 3px),
  linear-gradient(var(--accent), var(--accent)) 8px 8px / 14px 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) 8px 8px / 1.5px 14px no-repeat,
  linear-gradient(var(--accent), var(--accent)) calc(100% - 8px) calc(100% - 8px) / 14px 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) calc(100% - 8px) calc(100% - 8px) / 1.5px 14px no-repeat, var(--ct-hi, none); }
.cchat[data-pfam="relic"] .panel { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 4px rgba(0,0,0,.25), inset 0 0 0 5px rgba(255,255,255,.1); }
.cchat[data-pfam="relic"] .panel::before { background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.08), rgba(0,0,0,0) 60%), radial-gradient(130% 100% at 50% 110%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%), var(--ct-hi, none); }
.cchat[data-pfam="monitor"] .panel { border-radius: 0 !important; box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 6px 6px 0 rgba(0,0,0,.35); }
.cchat[data-pfam="monitor"] .panel::before { background: repeating-conic-gradient(rgba(255,255,255,.05) 0 25%, rgba(255,255,255,0) 0 50%) 0 0 / 4px 4px, var(--ct-hi, none); }

/* режим производительности: тяжёлые новые слои выключены */
.cchat[data-perf="on"] .lc-fxl:not(.lc-fxl--evsweep) { display: none; }

/* зона под текстом остаётся спокойной: слои эффектов затухают к центру пузыря (кроме кромочных) */
.lc-fxl:not(.lc-fxl--spark):not(.lc-fxl--bloom):not(.lc-fxl--evsweep) {
  -webkit-mask-image: radial-gradient(ellipse 78% 100% at 50% 50%, rgba(0,0,0,.3), #000 100%);
          mask-image: radial-gradient(ellipse 78% 100% at 50% 50%, rgba(0,0,0,.3), #000 100%);
}

/* ==========================================================================
   17. Слои глубины: задняя плашка · поверхность · внутренняя кромка · акценты · эмблемы · связки · передний план
   (BACKGROUND → SURFACE → CONTENT → FRAME → FOREGROUND)
   ========================================================================== */
/* --- задняя плашка: второй слой за пузырём --- */
.lc-bp { position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: var(--br); background: var(--bp-bg, var(--bp-c, var(--accent))); opacity: var(--bp-o, .55); }
.lc-b[data-bp="offset"] { margin: 0 7px 7px 0; }
.lc-b[data-bp="offset"] .lc-bp { transform: translate(7px, 7px); }
.lc-b[data-bp="tilt"] { margin-bottom: 5px; }
.lc-b[data-bp="tilt"] .lc-bp { transform: rotate(-2.4deg) translate(-3px, 4px); }
.lc-b[data-bp="stack"] { margin: 0 9px 9px 0; }
.lc-b[data-bp="stack"] .lc-bp { transform: translate(4px, 4px); box-shadow: 4px 4px 0 -1px var(--bp-c, var(--accent)); }
.lc-b[data-bp="tab"] { margin-top: 11px; }
.lc-b[data-bp="tab"] .lc-bp { inset: -10px auto auto 16px; width: 34%; min-width: 46px; height: 18px; border-radius: 10px 10px 0 0; }
.lc-b[data-bp="band"] { margin-bottom: 8px; }
.lc-b[data-bp="band"] .lc-bp { inset: auto 7px -7px 7px; height: 16px; border-radius: 0 0 14px 14px; }

/* --- внутренняя кромка: отдельно от рамки, даёт ощущение проработанного материала --- */
.lc-ie { position: absolute; inset: var(--ie-in, 3px); z-index: 3; display: none; pointer-events: none; border-radius: var(--br); opacity: var(--ie-o, .85); box-sizing: border-box; }
.cchat:not([data-ie="none"]) .lc-ie { display: block; }
.lc-b[data-kind="clip"] .lc-ie { border-radius: 0; -webkit-clip-path: var(--clip); clip-path: var(--clip); }
.lc-b[data-kind="mask"] .lc-ie { display: none; }
.cchat[data-ie="clear"] .lc-ie { border: 1px solid; border-color: rgba(255,255,255,.78) rgba(255,255,255,.22) rgba(255,255,255,.12) rgba(255,255,255,.5); box-shadow: inset 0 1px 1px rgba(255,255,255,.35); }
.cchat[data-ie="milky"] .lc-ie { border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 0 0 3px rgba(255,255,255,.14), inset 0 0 12px rgba(255,255,255,.3); }
.cchat[data-ie="crystal"] .lc-ie { border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0 8px, rgba(255,255,255,0) 8.5px) 0 0 / 24px 24px no-repeat,
    linear-gradient(-45deg, rgba(255,255,255,.5) 0 8px, rgba(255,255,255,0) 8.5px) 100% 100% / 24px 24px no-repeat,
    linear-gradient(225deg, rgba(255,255,255,.3) 0 5px, rgba(255,255,255,0) 5.5px) 100% 0 / 16px 16px no-repeat,
    linear-gradient(45deg, rgba(255,255,255,.3) 0 5px, rgba(255,255,255,0) 5.5px) 0 100% / 16px 16px no-repeat; }
.cchat[data-ie="holo"] .lc-ie { padding: 1.5px; background: linear-gradient(125deg, #ffc2ea, #cdbfff 28%, #a9e3ff 52%, #d2ffe8 74%, #ffe9b8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cchat[data-ie="metal"] .lc-ie { border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.22); }
.cchat[data-ie="pearl"] .lc-ie { border: 2.5px dotted rgba(255,255,255,.78); }
.cchat[data-ie="cyber"] .lc-ie { border: 1px dashed var(--ie-c, var(--accent)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.cchat[data-ie="pixel"] .lc-ie { border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255,255,255,.58), inset -2px -2px 0 rgba(0,0,0,.3); }

/* --- акценты пузыря (два слота): позиция, масштаб, прозрачность, цвет, отражение --- */
.lc-acc { position: absolute; z-index: 6; width: var(--acc-s, 22px); height: var(--acc-s, 22px); pointer-events: none;
  background: var(--acc-bg, var(--acc-c, var(--accent))); opacity: var(--acc-o, 1); transform: scaleX(var(--acc-mx, 1));
  -webkit-mask: var(--acc-m) center / contain no-repeat; mask: var(--acc-m) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.28)); }
.lc-acc[data-pos="top-left"]     { left: 8px;  top: calc(var(--acc-s) * -.55); }
.lc-acc[data-pos="top"]          { left: 50%;  top: calc(var(--acc-s) * -.6);  margin-left: calc(var(--acc-s) * -.5); }
.lc-acc[data-pos="top-right"]    { right: 8px; top: calc(var(--acc-s) * -.55); }
.lc-acc[data-pos="right"]        { right: calc(var(--acc-s) * -.5); top: 50%; margin-top: calc(var(--acc-s) * -.5); }
.lc-acc[data-pos="bottom-right"] { right: 8px; bottom: calc(var(--acc-s) * -.55); }
.lc-acc[data-pos="bottom"]       { left: 50%;  bottom: calc(var(--acc-s) * -.6); margin-left: calc(var(--acc-s) * -.5); }
.lc-acc[data-pos="bottom-left"]  { left: 8px;  bottom: calc(var(--acc-s) * -.55); }
.lc-acc[data-pos="left"]         { left: calc(var(--acc-s) * -.5); top: 50%; margin-top: calc(var(--acc-s) * -.5); }

/* --- вложение аватарки: отдельный съёмный слой --- */
.msg__att { position: absolute; z-index: 5; width: var(--att-s, 18px); height: var(--att-s, 18px); pointer-events: none; opacity: var(--att-o, 1); transform: scaleX(var(--att-mx, 1));
  background: var(--att-bg, var(--att-c, var(--accent))); -webkit-mask: var(--att-m) center / contain no-repeat; mask: var(--att-m) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.cchat[data-attpos="top-right"] .msg__att    { right: -22%; top: -20%; }
.cchat[data-attpos="top"] .msg__att          { left: 50%; top: -34%; margin-left: calc(var(--att-s) * -.5); }
.cchat[data-attpos="top-left"] .msg__att     { left: -22%; top: -20%; }
.cchat[data-attpos="left"] .msg__att         { left: -42%; top: 50%; margin-top: calc(var(--att-s) * -.5); }
.cchat[data-attpos="right"] .msg__att        { right: -42%; top: 50%; margin-top: calc(var(--att-s) * -.5); }
.cchat[data-attpos="bottom-right"] .msg__att { right: -22%; bottom: -20%; }
.cchat[data-attpos="bottom"] .msg__att       { left: 50%; bottom: -34%; margin-left: calc(var(--att-s) * -.5); }
.cchat[data-attpos="bottom-left"] .msg__att  { left: -22%; bottom: -20%; }

/* --- эмблема события: контейнер вокруг иконки (та же система, что у рамок аватарок) --- */
.evt[data-emb]:not([data-emb=""]) .evt__icon { margin: 9px 11px 9px 9px; }
.evt[data-emb]:not([data-emb=""]) .evt__icon::after { content: ''; position: absolute; inset: -25%; z-index: 3; pointer-events: none;
  background: linear-gradient(142deg, rgba(255,255,255,.45), rgba(255,255,255,0) 36%, rgba(0,0,0,0) 62%, rgba(0,0,0,.22)), var(--evt-c, var(--accent));
  -webkit-mask: var(--emb-m) center / 100% 100% no-repeat; mask: var(--emb-m) center / 100% 100% no-repeat; }

/* --- связка между подряд идущими сообщениями --- */
.cchat:not([data-cn="off"]) .item + .item::after { content: ''; position: absolute; display: block; pointer-events: none; width: 14px; height: var(--gap); top: calc(var(--gap) * -1);
  left: calc(var(--ava-size, 40px) / 2 + var(--ava-x, 0px) - 7px); opacity: .75; background: var(--cn-c, var(--accent));
  -webkit-mask: var(--cn-m) center / 100% 100% no-repeat; mask: var(--cn-m) center / 100% 100% no-repeat; }
.cchat[data-newest="top"]:not([data-cn="off"]) .item + .item::after { top: auto; bottom: calc(var(--gap) * -1); }
.cchat:not([data-cn="off"]) .item + .item.msg--cont::after, .cchat[data-ava="off"] .item + .item::after { display: none; }

/* --- передний план: подвески по краям, над всем, но не над текстом --- */
.fgd { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; opacity: var(--fg-o, .8); }
.fgd__s { position: absolute; width: 18px; height: var(--h, 40px); transform-origin: 50% 0; }
.fgd__s::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: calc(100% - var(--sz, 16px) * .55); background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.25)); }
.fgd__g { position: absolute; left: 50%; bottom: 0; width: var(--sz, 16px); height: var(--sz, 16px); margin-left: calc(var(--sz, 16px) * -.5);
  background: var(--accent); -webkit-mask: var(--fg-m) center / contain no-repeat; mask: var(--fg-m) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
@keyframes fg-sway { 0%, 100% { transform: rotate(calc(var(--sw, 3deg) * -1)); } 50% { transform: rotate(var(--sw, 3deg)); } }
.fgd[data-motion="sway"] .fgd__s { animation: fg-sway 6.5s ease-in-out var(--dl, 0s) infinite; }
.cchat[data-perf="on"] .fgd__s { animation: none; }

/* --- орнамент ника под именем --- */
.cchat[data-ornside="under"] .msg[data-orn] .msg__name { position: relative; }
.cchat[data-ornside="under"] .msg[data-orn] .msg__name::before { display: none; }
.cchat[data-ornside="under"] .msg[data-orn] .msg__name::after { position: absolute; left: 50%; top: 100%; margin: -.18em 0 0 calc(var(--orn-s, .9em) * -.5); transform: none; display: block; }
.cchat[data-ornside="under"] .msg[data-orn] .msg__nt { padding-bottom: .62em; }

/* --- новые эффекты --- */
.lc-fxl--glint { background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 60%) -60% 0 / 40% 2px no-repeat; animation: fxl-glint calc(8s / var(--fxs, 1)) ease-in-out infinite; }
@keyframes fxl-glint { 0%, 70% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
.lc-fxl--prism { background: linear-gradient(108deg, rgba(255,255,255,0) 30%, rgba(176,228,255,.55) 40%, rgba(255,186,238,.5) 50%, rgba(255,246,190,.45) 60%, rgba(255,255,255,0) 70%) -80% 0 / 70% 100% no-repeat; animation: fxl-prism calc(9s / var(--fxs, 1)) ease-in-out infinite; }
@keyframes fxl-prism { 0%, 55% { background-position: -80% 0; } 100% { background-position: 190% 0; } }
.lc-fxl--pixel { background: linear-gradient(#fff, #fff) 12% 24% / 3px 3px no-repeat, linear-gradient(#fff, #fff) 72% 62% / 3px 3px no-repeat, linear-gradient(#fff, #fff) 38% 78% / 2px 2px no-repeat, linear-gradient(#fff, #fff) 88% 18% / 2px 2px no-repeat;
  animation: fxl-pspark calc(3.2s / var(--fxs, 1)) steps(1) infinite; }
@keyframes fxl-pspark { 0%, 100% { opacity: 0; } 20% { opacity: var(--fxi, .6); } 28% { opacity: 0; } 60% { opacity: calc(var(--fxi, .6) * .7); } 66% { opacity: 0; } }

/* --- новые входы / выходы --- */
.cchat .item[data-anim="bubbleform"]  > .lc-row { animation-name: lc-in-bubbleform; }
.cchat .item[data-anim="holosweep"]   > .lc-row { animation-name: lc-in-holosweep; }
.cchat .item[data-anim="celestial"]   > .lc-row { animation-name: lc-in-celestial; }
.cchat .item[data-anim="editorial"]   > .lc-row { animation-name: lc-in-editorial; }
@keyframes lc-in-bubbleform { 0% { opacity: 0; transform: translateY(calc(8px * var(--k))) scale(.55, .35); } 45% { opacity: 1; transform: scale(calc(1 + .06 * var(--k)), calc(1 + .1 * var(--k))); } 75% { transform: scale(.99, 1.01); } 100% { opacity: 1; transform: none; } }
@keyframes lc-in-holosweep { 0% { opacity: .2; -webkit-clip-path: inset(-26px 100% -26px -26px); clip-path: inset(-26px 100% -26px -26px); filter: hue-rotate(60deg) saturate(1.7) brightness(1.4); } 100% { opacity: 1; -webkit-clip-path: inset(-26px); clip-path: inset(-26px); filter: none; } }
@keyframes lc-in-celestial { 0% { opacity: 0; transform: scale(1.05); filter: blur(7px) brightness(1.5); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes lc-in-editorial { 0% { opacity: 0; transform: translateX(-16px); -webkit-clip-path: inset(-26px 40% -26px -26px); clip-path: inset(-26px 40% -26px -26px); } 100% { opacity: 1; transform: none; -webkit-clip-path: inset(-26px); clip-path: inset(-26px); } }
.cchat[data-disappear="glassdissolve"]     .item.is-out > .lc-row { animation-name: lc-out-glassdissolve; }
.cchat[data-disappear="softfade"]          .item.is-out > .lc-row { animation-name: lc-out-softfade; }
.cchat[data-disappear="crystalfragment"]   .item.is-out > .lc-row { animation-name: lc-out-crystalfragment; animation-timing-function: steps(6, end); }
.cchat[data-disappear="cybercollapse"]     .item.is-out > .lc-row { animation-name: lc-out-cybercollapse; }
@keyframes lc-out-glassdissolve { 0% { opacity: 1; } 100% { opacity: 0; filter: blur(8px) brightness(1.4); transform: scale(1.03); } }
@keyframes lc-out-softfade { to { opacity: 0; transform: translateY(calc(-6px * var(--k))); } }
@keyframes lc-out-crystalfragment { 0% { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { opacity: 0; -webkit-clip-path: polygon(50% 40%, 62% 50%, 50% 60%, 38% 50%); clip-path: polygon(50% 40%, 62% 50%, 50% 60%, 38% 50%); transform: scale(.94); } }
@keyframes lc-out-cybercollapse { 0% { opacity: 1; filter: none; } 60% { opacity: 1; transform: scale(1, .08); filter: brightness(1.8); } 100% { opacity: 0; transform: scale(.2, .02); } }

/* ==========================================================================
   18. Эстетичные конструкции (референсы: sparkle glass, sakura night, cloud pastel, tabs, frost tags)
   ========================================================================== */
/* акценты: высота по пропорции, мягкий ореол, положения внутри кромки */
.lc-acc { height: var(--acc-h, var(--acc-s, 22px));
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)) drop-shadow(0 0 var(--acc-gl, 0px) var(--acc-c, var(--accent))); }
.lc-acc[data-pos="top-left"]     { top: calc(var(--acc-h, var(--acc-s)) * -.55); }
.lc-acc[data-pos="top"]          { top: calc(var(--acc-h, var(--acc-s)) * -.6); }
.lc-acc[data-pos="top-right"]    { top: calc(var(--acc-h, var(--acc-s)) * -.55); }
.lc-acc[data-pos="bottom-right"] { bottom: calc(var(--acc-h, var(--acc-s)) * -.55); }
.lc-acc[data-pos="bottom"]       { bottom: calc(var(--acc-h, var(--acc-s)) * -.6); }
.lc-acc[data-pos="bottom-left"]  { bottom: calc(var(--acc-h, var(--acc-s)) * -.55); }
.lc-acc[data-pos="right"]        { margin-top: calc(var(--acc-h, var(--acc-s)) * -.5); }
.lc-acc[data-pos="left"]         { margin-top: calc(var(--acc-h, var(--acc-s)) * -.5); }
.lc-acc[data-pos="left-in"]      { left: 9px;  top: 50%; margin-top: calc(var(--acc-h, var(--acc-s)) * -.5); }
.lc-acc[data-pos="right-in"]     { right: 9px; top: 50%; margin-top: calc(var(--acc-h, var(--acc-s)) * -.5); }

/* значок вместо картинки аватарки: искра, звезда, сердце… (plain | ring | disc) */
.msg__ava--glyph .msg__ava-ring { background: transparent !important; }
.msg__ava--glyph .msg__ava-in { background: transparent !important; box-shadow: none; display: grid; place-items: center; overflow: visible; }
.msg__ava--glyph .msg__ava-in > .ico { position: static; width: 62%; height: 62%; background: var(--gl-c, #fff); filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); }
.msg__ava--glyph[data-gs="ring"] .msg__ava-in { box-shadow: inset 0 0 0 2px var(--gl-c, #fff), 0 0 9px rgba(255,255,255,.35); }
.msg__ava--glyph[data-gs="disc"] .msg__ava-in { background: var(--gl-c, #fff) !important; }
.msg__ava--glyph[data-gs="disc"] .msg__ava-in > .ico { background: #2b2250; filter: none; }

/* метка у кромки пузыря («FIRST CHAT») */
.lc-tag { position: absolute; z-index: 7; padding: 2px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap;
  font: 700 .56em/1.45 var(--f-name, inherit); letter-spacing: .12em; text-transform: uppercase;
  background: var(--tag-bg, rgba(255,255,255,.9)); color: var(--tag-ink, #2a2f45); box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.lc-tag[data-pos="bottom-right"] { right: 12px; bottom: -9px; }
.lc-tag[data-pos="bottom-left"]  { left: 12px; bottom: -9px; }
.lc-tag[data-pos="top-right"]    { right: 12px; top: -9px; }
.lc-tag[data-pos="bottom"]       { left: 50%; bottom: -9px; transform: translateX(-50%); }

/* выравнивание текста в пузыре */
.lc-b { text-align: var(--ta-msg, left); }
.lc-b .msg__head { text-align: left; }

/* события: раскладки */
.cchat[data-evlayout="stack"] .evt__content { flex-direction: column; text-align: center; gap: 8px; padding: 8px 6px 4px; }
.cchat[data-evlayout="stack"] .evt__icon { width: 54px; height: 54px; }
.cchat[data-evlayout="stack"] .evt__body { display: flex; flex-direction: column; align-items: center; }
.cchat[data-evlayout="stack"] .evt__title { letter-spacing: .26em; }
.cchat[data-evlayout="stack"] .evt__note { font-size: 1.7em; font-weight: 300; letter-spacing: .14em; opacity: .78; margin-top: 4px; }
.cchat[data-evlayout="inline"] .evt .lc-shape, .cchat[data-evlayout="inline"] .evt .lc-frame, .cchat[data-evlayout="inline"] .evt .lc-tail,
.cchat[data-evlayout="inline"] .evt .lc-acc, .cchat[data-evlayout="inline"] .evt .lc-bp, .cchat[data-evlayout="inline"] .evt .md { display: none; }
.cchat[data-evlayout="inline"] .evt__bubble { padding: 2px 4px !important; background: none; }
.cchat[data-evlayout="inline"] .evt__icon { width: 26px; height: 26px; filter: none; }
.cchat[data-evlayout="inline"] .evt__iconbg { display: none; }
.cchat[data-evlayout="inline"] .evt__icon > .ico { width: 24px; height: 24px; background: var(--evt-c, var(--accent)); filter: drop-shadow(0 0 5px var(--evt-glow)); }
.cchat[data-evlayout="inline"] .evt__body { display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap; }
.cchat[data-evlayout="inline"] .evt__name { order: 1; letter-spacing: .16em; text-transform: uppercase; font-size: .95em; }
.cchat[data-evlayout="inline"] .evt__title { order: 2; letter-spacing: .06em; text-transform: none; font-size: .9em; opacity: .85; }
.cchat[data-evlayout="inline"] .evt__note { order: 3; }
.cchat[data-evtitle="custom"] .evt__title { font-family: var(--f-evt-title); text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.1; font-size: calc(var(--fs-evt-title, 11px) * 2.4); }

/* внутренние кромки: вставка, двойная линия, нижний свет */
.cchat[data-ie="inset"] .lc-ie { inset: calc(var(--bw, 1px) + var(--ie-in, 3px) * .8); border-radius: calc(var(--r, 14px) * .8); background: var(--ie-fill, rgba(255,255,255,.3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.cchat[data-ie="double"] .lc-ie { border: 1px solid rgba(255,255,255,.78); box-shadow: inset 0 0 0 3px rgba(255,255,255,0), inset 0 0 0 4px rgba(255,255,255,.32); }
.cchat[data-ie="under"] .lc-ie { box-shadow: inset 0 -2px 0 rgba(255,255,255,.88), inset 0 -9px 10px -7px rgba(255,255,255,.34); }

/* вынос акцента за кромку задаётся самим акцентом (--acc-ay): подвеска висит внутрь, цветок сидит на углу */
.lc-acc[data-pos="top-left"], .lc-acc[data-pos="top-right"], .lc-acc[data-pos="top"] { top: calc(var(--acc-h, var(--acc-s)) * var(--acc-ay, -.55)); }
.lc-acc[data-pos="bottom-left"], .lc-acc[data-pos="bottom-right"], .lc-acc[data-pos="bottom"] { bottom: calc(var(--acc-h, var(--acc-s)) * var(--acc-ay, -.55)); }