:root {
  --ari-primary: #25C3AF;
  --ari-white: #fafafa;
  --ari-white-text: #BABABA;
  --ari-avatar-dark-url: url("https://i.imgur.com/0oOAECJ.png");
  --ari-miniavatar-dark-url: url("https://i.imgur.com/H4crwUf.gif");
  --ari-avatar-dark-hog-url: url("https://i.imgur.com/0oOAECJ.png");
  --ari-miniavatar-dark-hog-url: url("https://i.imgur.com/Bf51hhy.gif");
  --ari-avatar-dark-dress-closeup: url("https://i.imgur.com/4niXeFR.png");
  --ari-avatar-dark-hog-closeup: url("https://i.imgur.com/vjWo9is.png");
  --ari-avatar-dark-royal-blue: url("https://i.imgur.com/ywQKLLU.png");
  --ari-avatar-dark-purple-royal-blue: url("https://i.imgur.com/xq3QqmJ.png");
  --ari-avatar-dark-purple-sly-tie: url("https://i.imgur.com/NfGH32O.png");
  --ari-avatar-chispa-purple-royal-blue: url("https://i.imgur.com/W4zrLFA.png");
  --ari-avatar-chispa-shoulder: url("https://i.imgur.com/YqP70LU.png");
  --ari-avatar-chispa-body:  url("https://i.imgur.com/SAsd5i6.png");
  --ari-avatar-chispa-whiteshirt:  url("https://i.imgur.com/eRKnEY3.png");
  --ari-avatar-chispa-sly-books:  url("https://i.imgur.com/ajhtmEq.png");
  --ari-miniavatar-chispa-no-smile: url("https://i.imgur.com/01zlnOj.png");
  --ari-miniavatar-chispa-eyes-closed: url("https://i.imgur.com/sqZ83w0.png");
  --ari-miniavatar-fragmentada: url("https://i.imgur.com/N7lpPIj.png");
}

[data-member-id="113"] {
  --ari-post-bg: #111318;
  --ari-post-text: var(--ari-white-text);
  --ari-post-muted: rgba(250, 250, 250, .72);
  --ari-post-link: var(--ari-primary);
  --ari-post-accent: var(--ari-primary);
  --ari-post-accent-soft: rgba(37, 195, 175, .18);
  --ari-post-panel-bg: rgba(0, 0, 0, .36);
  --ari-post-panel-text: var(--ari-white);
  --ari-post-quote-border: var(--bordeoscuro);
  --ari-title-color: var(--ari-white);
  --ari-title-glitch-color: var(--ari-white);
  --ari-title-glitch-bg: black;
}

html[data-theme="light"] [data-member-id="113"] {
  --ari-post-bg: #bcbcba;
  --ari-post-text: #202326;
  --ari-post-muted: #566064;
  --ari-post-link: #087d73;
  --ari-post-accent: #087d73;
  --ari-post-accent-soft: rgba(8, 125, 115, .16);
  --ari-post-panel-bg: rgba(255, 255, 255, .68);
  --ari-post-panel-text: #202326;
  --ari-post-quote-border: rgba(8, 125, 115, .34);
  --ari-title-color: #202326;
  --ari-title-glitch-color: #202326;
  --ari-title-glitch-bg: #bcbcba;
}

html[data-theme="light"] [data-member-id="113"] .post .inner .ari-title,
html[data-theme="light"] [data-member-id="113"] .post .inner .ari-title-line {
  color: var(--ari-title-color) !important;
}

/* Arikel: cuerpo interno de cada post escrito por el usuario 113. */
[data-member-id="113"] .post > .inner {
  background: var(--ari-post-bg);
  color: var(--ari-post-text);
  font-family: var(--ari-body-font-family), Georgia, serif;
  font-weight: 300;
  /* border: 1px solid var(--ari-primary); */
  /* border-radius: 15px; */
}

[data-member-id="113"] .post > .inner a {
  color: var(--ari-post-link);
}

/* Arikel: separador horizontal dentro del cuerpo del post. */
[data-member-id="113"] .post > .inner hr {
  width: 80%;
  height: 1px;
  margin: 30px auto 20px;
  background: linear-gradient(to right, transparent, var(--ari-post-accent), transparent);
  border: 0;
}

/* Arikel: diálogos detectados por JS a partir del color principal del personaje. */
[data-member-id="113"] .post .inner .ari-dialogue {
  color: var(--ari-post-accent) !important;
  font-family: var(--ari-dialogue-font-family), sans-serif;
  font-weight: 500;
  letter-spacing: .03em;
  text-shadow: 0 0 8px var(--ari-post-accent-soft);
}

[data-member-id="113"] .post .inner i {
  vertical-align: initial;
}

/* Arikel: caja de dados dentro del cuerpo del post o del bloque moderno de tiradas. */
[data-member-id="113"] .post > .inner .dados,
[data-member-id="113"] .hph-dice-results,
[data-member-id="113"] .hph-dice-result {
  background: var(--ari-post-panel-bg);
  color: var(--ari-post-panel-text);
}

/* Arikel: color destacado para icono y resultados de dados, en formato viejo y moderno. */
[data-member-id="113"] .post > .inner .dados::before,
[data-member-id="113"] .post > .inner .dados span,
[data-member-id="113"] .hph-dice-result__header::before,
[data-member-id="113"] .hph-dice-result__label,
[data-member-id="113"] .hph-dice-result__body span {
  color: var(--ari-post-accent);
}

/* Arikel: el título del bloque moderno de dados usa la misma estética glitch que el header y el footer. */
[data-member-id="113"] .hph-dice-results__title.ari-dice-glitch {
  position: relative;
  display: inline-block;
  font-family: var(--ari-title-font-family, 'UnifrakturCook'), sans-serif;
  font-weight: 700;
  color: var(--ari-post-panel-text);
  line-height: 1;
}

/* Arikel: título del spoiler en el color principal del personaje. */
[data-member-id="113"] .bbc_spoiler > summary {
  color: var(--ari-post-accent);
}

/* Arikel: borde/acento lateral de las citas en el color principal del personaje. */
[data-member-id="113"] .bbc_standard_quote {
  border-left-color: var(--ari-post-quote-border) !important;
}

/* Arikel: encabezado/cite de las citas en el color principal del personaje. */
[data-member-id="113"] .bbc_standard_quote > cite {
  color: var(--ari-post-accent);
}

/* Arikel: oculta el nombre real para permitir el reemplazo global con pseudo-elemento. */
[data-member-id="113"] .postcab1 > a {
  font-size: 0;
  position: relative;
}

/* Arikel: nombre personalizado en la cabecera del post. */
[data-member-id="113"] .postcab1 > a::after {
  content: "Arikel Anastasia McDowell";
  font-size: 2.8rem;
  color: #527A52;
  display: inline-block;
}

/* Arikel: mantiene .avatartotal como contenedor para no bloquear el toggle de avatar adicional. */
[data-member-id="113"] .avatartotal,
[data-member-id="113"] .avatartotal:hover {
  content: normal !important;
}

/* Arikel: prepara el avatar para interferencias idle muy sutiles. */
[data-member-id="113"] .avatartotal {
  --ari-idle-avatar-a: var(--ari-avatar-dark-hog-closeup);
  --ari-idle-avatar-b: var(--ari-avatar-chispa-shoulder);
  isolation: isolate;
  overflow: visible;
}

/* Arikel: invierte los canales idle cuando el avatar adicional está activo. */
[data-member-id="113"] .avatartotal[data-avatar-state="pma"] {
  --ari-idle-avatar-a: var(--ari-avatar-chispa-shoulder);
  --ari-idle-avatar-b: var(--ari-avatar-dark-hog-closeup);
}

/* Arikel: micro glitch idle sobre el avatar, visible solo en pulsos breves y poco agresivos. */
[data-member-id="113"] .avatartotal:not([data-avatar-transition])::before,
[data-member-id="113"] .avatartotal:not([data-avatar-transition])::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Arikel: canal turquesa idle, como una interferencia mágica mínima. */
[data-member-id="113"] .avatartotal:not([data-avatar-transition])::before {
  background:
          linear-gradient(rgba(37, 195, 175, .16), rgba(37, 195, 175, .16)),
          var(--ari-idle-avatar-a) center/cover no-repeat;
  animation: ariAvatarIdleGlitchA 8.5s linear infinite;
  animation-name: var(--ari-avatar-idle-a-animation, ariAvatarIdleGlitchA);
}

/* Arikel: canal dorado idle, un pulso corto de chispa/sirena. */
[data-member-id="113"] .avatartotal:not([data-avatar-transition])::after {
  background:
          linear-gradient(rgba(255, 222, 140, .13), rgba(255, 222, 140, .13)),
          var(--ari-idle-avatar-b) center/cover no-repeat;
  animation: ariAvatarIdleGlitchB 11s linear infinite;
  animation-name: var(--ari-avatar-idle-b-animation, ariAvatarIdleGlitchB);
}

/* Arikel: capa de strips idle independientes, estilo image glitch por tiras horizontales. */
[data-member-id="113"] .avatartotal .ari-avatar-strip-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
}

/* Arikel: cada strip reconstruye un pedazo del avatar y se desplaza por su cuenta. */
[data-member-id="113"] .avatartotal .ari-avatar-strip {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image:
          linear-gradient(var(--ari-strip-tint, rgba(37, 195, 175, .18)), var(--ari-strip-tint, rgba(37, 195, 175, .18))),
          var(--ari-strip-image);
  background-repeat: no-repeat;
  background-size: var(--ari-strip-bg-size);
  background-position: 0 var(--ari-strip-bg-y);
  animation: var(--ari-avatar-strip-animation, none) var(--ari-avatar-strip-duration, 10s) linear infinite;
  animation-delay: var(--ari-avatar-strip-delay, 0s);
}

/* Arikel: durante la transición principal/PMA, los strips idle se apagan para no mezclarse. */
[data-member-id="113"] .avatartotal[data-avatar-transition] .ari-avatar-strip-layer {
  display: none;
}

/* Arikel: base visual para la transición glitch de avatar inspirada en Codrops CSSGlitchEffect. */
[data-member-id="113"] .avatartotal[data-avatar-transition] {
  --ari-glitch-gap-x: 10px;
  --ari-glitch-gap-y: 5px;
  --ari-glitch-time: 1.7s;
  isolation: isolate;
}

/* Arikel: capas tintadas del glitch; la imagen original la muestran .av-front/.av-back. */
[data-member-id="113"] .avatartotal[data-avatar-transition]::before,
[data-member-id="113"] .avatartotal[data-avatar-transition]::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ari-glitch-gap-y)) calc(-1 * var(--ari-glitch-gap-x));
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Arikel: canal turquesa desplazado que corta la imagen en franjas rápidas. */
[data-member-id="113"] .avatartotal[data-avatar-transition]::before {
  background: linear-gradient(rgba(37, 195, 175, .28), rgba(37, 195, 175, .28));
  animation: ariAvatarGlitchChannelA var(--ari-glitch-time) linear forwards;
  animation-name: var(--ari-avatar-channel-a-animation, ariAvatarGlitchChannelA);
}

/* Arikel: canal dorado/blanco para el flash mágico de cierre. */
[data-member-id="113"] .avatartotal[data-avatar-transition]::after {
  background:
          radial-gradient(circle at 50% 45%, rgba(255, 245, 210, .60), transparent 32%),
          linear-gradient(rgba(255, 218, 115, .24), rgba(37, 195, 175, .12));
  animation: ariAvatarGlitchChannelB var(--ari-glitch-time) linear forwards;
  animation-name: var(--ari-avatar-channel-b-animation, ariAvatarGlitchChannelB);
}

/* Arikel: el avatar adicional original aparece entrecortado, como señal corrupta, antes del reemplazo CSS final. */
[data-member-id="113"] .avatartotal[data-avatar-transition="principal-to-pma"] .av-back {
  opacity: 1 !important;
  animation: ariAvatarGlitchBack 1.7s linear forwards;
  animation-name: var(--ari-avatar-back-animation, ariAvatarGlitchBack);
  will-change: clip-path, transform, filter, opacity;
}

/* Arikel: el avatar principal CSS se rompe en cortes horizontales antes de ceder al avatar adicional. */
[data-member-id="113"] .avatartotal[data-avatar-transition="principal-to-pma"] .av-front {
  animation: ariAvatarGlitchFront 1.7s linear forwards;
  animation-name: var(--ari-avatar-front-animation, ariAvatarGlitchFront);
  will-change: clip-path, transform, filter, opacity;
}

/* Arikel: transición inversa, de PMA a principal, con el mismo lenguaje glitch. */
[data-member-id="113"] .avatartotal[data-avatar-transition="pma-to-principal"] .av-back {
  opacity: 1 !important;
  animation: ariAvatarGlitchBack 1.7s linear forwards;
  animation-name: var(--ari-avatar-back-animation, ariAvatarGlitchBack);
  will-change: clip-path, transform, filter, opacity;
}

/* Arikel: salida glitch de la capa frontal durante la transición inversa. */
[data-member-id="113"] .avatartotal[data-avatar-transition="pma-to-principal"] .av-front {
  animation: ariAvatarGlitchFront 1.7s linear forwards;
  animation-name: var(--ari-avatar-front-animation, ariAvatarGlitchFront);
  will-change: clip-path, transform, filter, opacity;
}

/* Arikel: slices del avatar saliente, basado en la técnica de clip-path de Codrops. */
@keyframes ariAvatarGlitchFront {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: saturate(1) contrast(1);
    clip-path: inset(0 0 0 0);
  }
  8% {
    transform: translate3d(8px, -2px, 0);
    filter: saturate(1.8) contrast(1.25);
    clip-path: inset(2% 0 82% 0);
  }
  16% {
    transform: translate3d(-10px, 3px, 0);
    clip-path: inset(38% 0 50% 0);
  }
  25% {
    transform: translate3d(6px, 0, 0);
    clip-path: inset(70% 0 17% 0);
  }
  34% {
    opacity: .82;
    transform: translate3d(-6px, -4px, 0);
    clip-path: inset(14% 0 64% 0);
  }
  46% {
    opacity: .68;
    transform: translate3d(10px, 2px, 0);
    clip-path: inset(55% 0 33% 0);
  }
  58% {
    opacity: .42;
    transform: translate3d(-12px, 0, 0);
    filter: saturate(2) contrast(1.35) blur(.4px);
    clip-path: inset(28% 0 58% 0);
  }
  72% {
    opacity: .22;
    transform: translate3d(5px, 4px, 0);
    clip-path: inset(82% 0 6% 0);
  }
  86% {
    opacity: .08;
    transform: translate3d(0, 0, 0);
    clip-path: inset(45% 0 48% 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

/* Arikel: slices del avatar entrante original, visible durante la interferencia. */
@keyframes ariAvatarGlitchBack {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    filter: brightness(.95) saturate(1);
    clip-path: inset(100% 0 0 0);
  }
  7% {
    opacity: .88;
    transform: translate3d(-10px, 2px, 0);
    clip-path: inset(76% 0 12% 0);
  }
  15% {
    transform: translate3d(9px, -3px, 0);
    filter: brightness(1.16) saturate(1.5);
    clip-path: inset(8% 0 78% 0);
  }
  24% {
    transform: translate3d(-6px, 0, 0);
    clip-path: inset(46% 0 42% 0);
  }
  36% {
    opacity: 1;
    transform: translate3d(8px, 4px, 0);
    clip-path: inset(64% 0 20% 0);
  }
  49% {
    transform: translate3d(-12px, -2px, 0);
    filter: brightness(1.25) saturate(1.8) contrast(1.18);
    clip-path: inset(22% 0 62% 0);
  }
  63% {
    transform: translate3d(7px, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 1;
    transform: translate3d(-3px, 2px, 0);
    filter: brightness(1.12) saturate(1.35);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: brightness(1) saturate(1);
    clip-path: inset(0 0 0 0);
  }
}

/* Arikel: canal turquesa de interferencia, hecho con franjas tipo Codrops. */
@keyframes ariAvatarGlitchChannelA {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  6% {
    opacity: .65;
    transform: translate3d(var(--ari-glitch-gap-x), 0, 0);
    clip-path: inset(3% 0 91% 0);
  }
  14% {
    clip-path: inset(18% 0 76% 0);
  }
  23% {
    transform: translate3d(calc(-1 * var(--ari-glitch-gap-x)), 2px, 0);
    clip-path: inset(42% 0 47% 0);
  }
  37% {
    opacity: .55;
    clip-path: inset(70% 0 20% 0);
  }
  51% {
    transform: translate3d(12px, -2px, 0);
    clip-path: inset(28% 0 60% 0);
  }
  67% {
    opacity: .38;
    clip-path: inset(82% 0 8% 0);
  }
  76%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

/* Arikel: canal dorado y flash final de resincronización mágica. */
@keyframes ariAvatarGlitchChannelB {
  0%, 58%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  12% {
    opacity: .26;
    transform: translate3d(-8px, var(--ari-glitch-gap-y), 0);
    clip-path: inset(30% 0 55% 0);
  }
  29% {
    opacity: .32;
    transform: translate3d(8px, calc(-1 * var(--ari-glitch-gap-y)), 0);
    clip-path: inset(55% 0 33% 0);
  }
  62% {
    opacity: .75;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  68% {
    opacity: .18;
  }
  74% {
    opacity: .55;
  }
  82% {
    opacity: 0;
  }
}

/* Arikel: noise-anim del glitch text original de Lucas Bebber, compilado desde SCSS a CSS. */
@keyframes ariTitleNoiseA {
  0% { clip: rect(24px, 9999px, 44px, 0); }
  5% { clip: rect(76px, 9999px, 19px, 0); }
  10% { clip: rect(35px, 9999px, 71px, 0); }
  15% { clip: rect(91px, 9999px, 37px, 0); }
  20% { clip: rect(68px, 9999px, 93px, 0); }
  25% { clip: rect(18px, 9999px, 84px, 0); }
  30% { clip: rect(53px, 9999px, 29px, 0); }
  35% { clip: rect(3px, 9999px, 61px, 0); }
  40% { clip: rect(88px, 9999px, 47px, 0); }
  45% { clip: rect(42px, 9999px, 98px, 0); }
  50% { clip: rect(12px, 9999px, 56px, 0); }
  55% { clip: rect(63px, 9999px, 22px, 0); }
  60% { clip: rect(7px, 9999px, 77px, 0); }
  65% { clip: rect(81px, 9999px, 34px, 0); }
  70% { clip: rect(30px, 9999px, 90px, 0); }
  75% { clip: rect(58px, 9999px, 13px, 0); }
  80% { clip: rect(96px, 9999px, 52px, 0); }
  85% { clip: rect(27px, 9999px, 66px, 0); }
  90% { clip: rect(73px, 9999px, 41px, 0); }
  95% { clip: rect(9px, 9999px, 87px, 0); }
  100% { clip: rect(49px, 9999px, 16px, 0); }
}

/* Arikel: noise-anim-2 del glitch text original de Lucas Bebber, compilado desde SCSS a CSS. */
@keyframes ariTitleNoiseB {
  0% { clip: rect(71px, 9999px, 25px, 0); }
  5% { clip: rect(14px, 9999px, 82px, 0); }
  10% { clip: rect(48px, 9999px, 11px, 0); }
  15% { clip: rect(97px, 9999px, 53px, 0); }
  20% { clip: rect(33px, 9999px, 69px, 0); }
  25% { clip: rect(5px, 9999px, 43px, 0); }
  30% { clip: rect(86px, 9999px, 18px, 0); }
  35% { clip: rect(55px, 9999px, 94px, 0); }
  40% { clip: rect(21px, 9999px, 60px, 0); }
  45% { clip: rect(79px, 9999px, 31px, 0); }
  50% { clip: rect(40px, 9999px, 88px, 0); }
  55% { clip: rect(2px, 9999px, 74px, 0); }
  60% { clip: rect(62px, 9999px, 27px, 0); }
  65% { clip: rect(93px, 9999px, 50px, 0); }
  70% { clip: rect(16px, 9999px, 65px, 0); }
  75% { clip: rect(45px, 9999px, 8px, 0); }
  80% { clip: rect(84px, 9999px, 39px, 0); }
  85% { clip: rect(26px, 9999px, 99px, 0); }
  90% { clip: rect(57px, 9999px, 20px, 0); }
  95% { clip: rect(10px, 9999px, 72px, 0); }
  100% { clip: rect(90px, 9999px, 36px, 0); }
}

/* Arikel: canal rojo del glitch para títulos partidos en líneas de 26px. */
@keyframes ariTitleLineNoiseA {
  0% { clip: rect(6px, 9999px, 11px, 0); }
  5% { clip: rect(19px, 9999px, 5px, 0); }
  10% { clip: rect(9px, 9999px, 18px, 0); }
  15% { clip: rect(23px, 9999px, 9px, 0); }
  20% { clip: rect(17px, 9999px, 23px, 0); }
  25% { clip: rect(5px, 9999px, 21px, 0); }
  30% { clip: rect(13px, 9999px, 7px, 0); }
  35% { clip: rect(1px, 9999px, 15px, 0); }
  40% { clip: rect(22px, 9999px, 12px, 0); }
  45% { clip: rect(11px, 9999px, 24px, 0); }
  50% { clip: rect(3px, 9999px, 14px, 0); }
  55% { clip: rect(16px, 9999px, 6px, 0); }
  60% { clip: rect(2px, 9999px, 19px, 0); }
  65% { clip: rect(20px, 9999px, 8px, 0); }
  70% { clip: rect(8px, 9999px, 22px, 0); }
  75% { clip: rect(15px, 9999px, 3px, 0); }
  80% { clip: rect(24px, 9999px, 13px, 0); }
  85% { clip: rect(7px, 9999px, 17px, 0); }
  90% { clip: rect(18px, 9999px, 10px, 0); }
  95% { clip: rect(2px, 9999px, 22px, 0); }
  100% { clip: rect(12px, 9999px, 4px, 0); }
}

/* Arikel: canal azul del glitch para títulos partidos en líneas de 26px. */
@keyframes ariTitleLineNoiseB {
  0% { clip: rect(18px, 9999px, 6px, 0); }
  5% { clip: rect(4px, 9999px, 21px, 0); }
  10% { clip: rect(12px, 9999px, 3px, 0); }
  15% { clip: rect(24px, 9999px, 13px, 0); }
  20% { clip: rect(8px, 9999px, 17px, 0); }
  25% { clip: rect(1px, 9999px, 11px, 0); }
  30% { clip: rect(21px, 9999px, 5px, 0); }
  35% { clip: rect(14px, 9999px, 23px, 0); }
  40% { clip: rect(5px, 9999px, 15px, 0); }
  45% { clip: rect(20px, 9999px, 8px, 0); }
  50% { clip: rect(10px, 9999px, 22px, 0); }
  55% { clip: rect(1px, 9999px, 19px, 0); }
  60% { clip: rect(16px, 9999px, 7px, 0); }
  65% { clip: rect(23px, 9999px, 13px, 0); }
  70% { clip: rect(4px, 9999px, 16px, 0); }
  75% { clip: rect(11px, 9999px, 2px, 0); }
  80% { clip: rect(21px, 9999px, 10px, 0); }
  85% { clip: rect(7px, 9999px, 24px, 0); }
  90% { clip: rect(14px, 9999px, 5px, 0); }
  95% { clip: rect(3px, 9999px, 18px, 0); }
  100% { clip: rect(22px, 9999px, 9px, 0); }
}

/* Arikel: canal idle turquesa, apenas unas franjas ocasionales sobre el avatar. */
@keyframes ariAvatarIdleGlitchA {
  0%, 78%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  79% {
    opacity: .20;
    transform: translate3d(3px, 0, 0);
    clip-path: inset(12% 0 83% 0);
  }
  80% {
    opacity: .14;
    transform: translate3d(-2px, 1px, 0);
    clip-path: inset(52% 0 40% 0);
  }
  81% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  92% {
    opacity: .12;
    transform: translate3d(2px, -1px, 0);
    clip-path: inset(75% 0 17% 0);
  }
  93% {
    opacity: 0;
  }
}

/* Arikel: canal idle dorado, un parpadeo más lento y suave. */
@keyframes ariAvatarIdleGlitchB {
  0%, 88%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  89% {
    opacity: .16;
    transform: translate3d(-2px, 1px, 0);
    clip-path: inset(28% 0 65% 0);
  }
  90% {
    opacity: .10;
    transform: translate3d(2px, 0, 0);
    clip-path: inset(63% 0 28% 0);
  }
  91% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

.ari-basic-header {
  margin: 0 0 20px;
  padding: 22px 24px;
  border-top: 1px solid var(--ari-primary);
  border-bottom: 1px solid var(--ari-primary);
  background: rgba(0, 0, 0, .32);
  color: white;
  font-family: var(--ari-title-font-family, 'UnifrakturCook'), sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.ari-header {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.ari-border {
  position: relative;
  overflow: visible;
  display: inline-block;
  width: 100%;
  height: auto;
}

.ari-border::before,
.ari-border::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 6;
  pointer-events: none;
  background:
          linear-gradient(var(--ari-corner-color) 0 0) left top / 42px 1px no-repeat,
          linear-gradient(var(--ari-corner-color) 0 0) left top / 1px 42px no-repeat,
          linear-gradient(var(--ari-corner-color) 0 0) right top / 42px 1px no-repeat,
          linear-gradient(var(--ari-corner-color) 0 0) right top / 1px 42px no-repeat,
          linear-gradient(var(--ari-corner-color) 0 0) left bottom / 42px 1px no-repeat,
          linear-gradient(var(--ari-corner-color) 0 0) left bottom / 1px 42px no-repeat,
          linear-gradient(var(--ari-corner-color) 0 0) right bottom / 42px 1px no-repeat,
          linear-gradient(var(--ari-corner-color) 0 0) right bottom / 1px 42px no-repeat;
}

.ari-border::before {
  --ari-corner-color: var(--ari-primary);
  opacity: 1;
  filter: none;
  animation: ariCyberCornerPrimaryIdle 7.5s linear infinite;
}

.ari-border::after {
  --ari-corner-color: rgba(255, 80, 80, .42);
  opacity: 0;
  filter: none;
  transform: translate3d(1px, 0, 0);
  animation: ariCyberCornerAccentIdle 7.5s linear infinite;
  animation-delay: -3.2s;
}

.ari-bg {
  height: 250px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 5px 2px rgba(4, 4, 4, 0.61);
  overflow: hidden;
  isolation: isolate;
  background-image:
          repeating-linear-gradient(
                  0deg,
                  transparent,
                  transparent 2px,
                  rgba(0, 0, 0, .16) 2px,
                  rgba(0, 0, 0, .16) 4px
          );
  background-blend-mode: multiply;
  animation: ariHeaderCrtFlicker 6.5s steps(2) infinite;
}

.ari-bg-hover {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  z-index: 2;
  pointer-events: none;
}

.ari-header:hover .ari-bg-hover {
  animation: ariHeaderGlitchBack 1.7s linear forwards;
}

.ari-header:hover .ari-bg-base {
  animation: ariHeaderGlitchFront 1.7s linear forwards;
}

.ari-bg::before,
.ari-bg::after {
  content: "";
  position: absolute;
  inset: -6px -12px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-size: cover;
  background-position: center;
  background-image:
          linear-gradient(var(--ari-header-glitch-tint, rgba(37, 195, 175, .24)), var(--ari-header-glitch-tint, rgba(37, 195, 175, .24))),
          var(--ari-header-hover-image);
}

.ari-bg::before {
  --ari-header-glitch-tint: rgba(37, 195, 175, .26);
  animation: ariHeaderChromaticPulseA 8.5s steps(1) infinite;
}

.ari-bg::after {
  --ari-header-glitch-tint: rgba(255, 222, 140, .20);
  animation: ariHeaderChromaticPulseB 9.5s steps(1) infinite;
  animation-delay: -3.4s;
}

.ari-header:hover .ari-bg::before {
  animation: ariHeaderGlitchChannelA 1.7s linear forwards;
}

.ari-header:hover .ari-bg::after {
  animation: ariHeaderGlitchChannelB 1.7s linear forwards;
}

.ari-bg-base,
.ari-bg-hover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.ari-bg-base {
  z-index: 1;
}

.ari-bg-base::after,
.ari-bg-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
          repeating-linear-gradient(
                  0deg,
                  transparent,
                  transparent 2px,
                  rgba(0, 0, 0, .18) 2px,
                  rgba(0, 0, 0, .18) 4px
          );
  opacity: .32;
  mix-blend-mode: multiply;
  animation: ariHeaderScanlineFlicker 5.5s steps(2) infinite;
}

@keyframes ariHeaderScanlineFlicker {
  0%, 100% {
    opacity: .28;
  }
  50% {
    opacity: .36;
  }
}

@keyframes ariHeaderCrtFlicker {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(.99) saturate(1.03);
  }
}

@keyframes ariHeaderChromaticPulseA {
  0%, 82%, 88%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  83% {
    opacity: .16;
    transform: translate3d(2px, 0, 0);
    clip-path: inset(18% 0 68% 0);
  }
  85% {
    opacity: .11;
    transform: translate3d(-1px, 0, 0);
    clip-path: inset(54% 0 32% 0);
  }
}

@keyframes ariHeaderChromaticPulseB {
  0%, 80%, 86%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  81% {
    opacity: .13;
    transform: translate3d(-2px, 0, 0);
    clip-path: inset(30% 0 56% 0);
  }
  84% {
    opacity: .10;
    transform: translate3d(1px, 0, 0);
    clip-path: inset(72% 0 16% 0);
  }
}

@keyframes ariHeaderGlitchFront {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: saturate(1) contrast(1);
    clip-path: inset(0 0 0 0);
  }
  8% {
    transform: scale(1.02) translate(8px, -2px);
    filter: saturate(1.8) contrast(1.25);
    clip-path: inset(2% 0 82% 0);
  }
  16% {
    transform: scale(1.015) translate(-10px, 3px);
    clip-path: inset(38% 0 50% 0);
  }
  25% {
    transform: scale(1.02) translate(6px, 0);
    clip-path: inset(70% 0 17% 0);
  }
  34% {
    opacity: .82;
    transform: scale(1.015) translate(-6px, -4px);
    clip-path: inset(14% 0 64% 0);
  }
  46% {
    opacity: .68;
    transform: scale(1.02) translate(10px, 2px);
    clip-path: inset(55% 0 33% 0);
  }
  58% {
    opacity: .42;
    transform: scale(1.01) translate(-12px, 0);
    filter: saturate(2) contrast(1.35) blur(.4px);
    clip-path: inset(28% 0 58% 0);
  }
  72% {
    opacity: .22;
    transform: scale(1.015) translate(5px, 4px);
    clip-path: inset(82% 0 6% 0);
  }
  86% {
    opacity: .08;
    transform: scale(1.01) translate(0, 0);
    clip-path: inset(45% 0 48% 0);
  }
  100% {
    opacity: 0;
    transform: scale(1.01) translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ariHeaderGlitchBack {
  0% {
    opacity: 0;
    transform: scale(1.01) translate(0, 0);
    filter: brightness(.95) saturate(1);
    clip-path: inset(100% 0 0 0);
  }
  7% {
    opacity: .88;
    transform: scale(1.02) translate(-10px, 2px);
    clip-path: inset(76% 0 12% 0);
  }
  15% {
    transform: scale(1.015) translate(9px, -3px);
    filter: brightness(1.16) saturate(1.5);
    clip-path: inset(8% 0 78% 0);
  }
  24% {
    transform: scale(1.02) translate(-6px, 0);
    clip-path: inset(46% 0 42% 0);
  }
  36% {
    opacity: 1;
    transform: scale(1.015) translate(8px, 4px);
    clip-path: inset(64% 0 20% 0);
  }
  49% {
    transform: scale(1.02) translate(-12px, -2px);
    filter: brightness(1.25) saturate(1.8) contrast(1.18);
    clip-path: inset(22% 0 62% 0);
  }
  63% {
    transform: scale(1.015) translate(7px, 0);
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 1;
    transform: scale(1.02) translate(-3px, 2px);
    filter: brightness(1.12) saturate(1.35);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    transform: scale(1.01) translate(0, 0);
    filter: brightness(1) saturate(1);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ariHeaderGlitchChannelA {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  6% {
    opacity: .65;
    transform: translate3d(14px, 0, 0);
    clip-path: inset(3% 0 91% 0);
  }
  14% {
    clip-path: inset(18% 0 76% 0);
  }
  23% {
    transform: translate3d(-14px, 2px, 0);
    clip-path: inset(42% 0 47% 0);
  }
  37% {
    opacity: .55;
    clip-path: inset(70% 0 20% 0);
  }
  51% {
    transform: translate3d(18px, -2px, 0);
    clip-path: inset(28% 0 60% 0);
  }
  68% {
    opacity: .38;
    transform: translate3d(-8px, 0, 0);
    clip-path: inset(82% 0 8% 0);
  }
}

@keyframes ariHeaderGlitchChannelB {
  0%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  11% {
    opacity: .56;
    transform: translate3d(-18px, 1px, 0);
    clip-path: inset(30% 0 55% 0);
  }
  29% {
    transform: translate3d(12px, -2px, 0);
    clip-path: inset(55% 0 33% 0);
  }
  44% {
    opacity: .42;
    transform: translate3d(-10px, 0, 0);
    clip-path: inset(12% 0 80% 0);
  }
  61% {
    opacity: .30;
    transform: translate3d(8px, 2px, 0);
    clip-path: inset(78% 0 10% 0);
  }
}

.ari-img {
  position: absolute;
  top: 200px;
  left: 20px;
  z-index: 8;
}

.ari-imgborder {
  height: 120px;
  aspect-ratio: 1 / 1;
  overflow: visible;
  position: relative;
  border: 1px solid var(--ari-primary);
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.ari-imgborder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@keyframes ariCyberCornerPrimaryIdle {
  0%, 72%, 78%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
  73% {
    opacity: .55;
    transform: translate3d(2px, 0, 0);
    filter:
            drop-shadow(2px 0 0 rgba(255, 80, 80, .35))
            drop-shadow(-2px 0 0 rgba(37, 195, 175, .45));
  }
  74% {
    opacity: .96;
    transform: translate3d(-2px, 1px, 0);
  }
  76% {
    opacity: .60;
    transform: translate3d(1px, -1px, 0);
  }
}

@keyframes ariCyberCornerAccentIdle {
  0%, 72%, 78%, 100% {
    opacity: 0;
    transform: translate3d(1px, 0, 0);
    filter: none;
  }
  73% {
    opacity: .42;
    transform: translate3d(3px, 0, 0);
    filter: drop-shadow(1px 0 0 rgba(255, 80, 80, .25));
  }
  74% {
    opacity: .22;
    transform: translate3d(-1px, 1px, 0);
  }
  76% {
    opacity: .34;
    transform: translate3d(2px, -1px, 0);
  }
}

.ari-titlewrapper {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding-left: 160px;
  padding-right: 20px;
  text-align: left;
  z-index: 1;
  position: relative;
}

.ari-title {
  font-family: var(--ari-title-font-family, 'UnifrakturCook'), sans-serif;
  font-weight: 700;
  color: var(--ari-title-color, white);
  font-size: 26px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.ari-title-line {
  position: relative;
  display: inline-block;
  color: var(--ari-title-color, white);
  line-height: 1;
  white-space: nowrap;
}

@media only screen and (max-width: 768px) {
  [data-member-id="113"] .post_wrapper.poster-visible .postarea {
    position: relative;
    z-index: 0;
  }

  [data-member-id="113"] .post_wrapper.poster-visible .poster {
    z-index: 20;
  }

  [data-member-id="113"] .post .inner .ari-header,
  [data-member-id="113"] .post .inner .ari-border,
  [data-member-id="113"] .post .inner .ari-bg {
    width: 100% !important;
  }

  [data-member-id="113"] .post .inner .ari-border {
    display: block;
  }

  [data-member-id="113"] .post .inner .ari-title {
    width: auto !important;
    max-width: calc(100% - 160px) !important;
  }
}

@media only screen and (max-width: 520px) {
  [data-member-id="113"] .post .inner .ari-header {
    margin-bottom: 24px;
  }

  [data-member-id="113"] .post .inner .ari-img {
    top: 194px;
    left: 50%;
    transform: translateX(-50%);
  }

  [data-member-id="113"] .post .inner .ari-imgborder {
    height: 92px;
  }

  [data-member-id="113"] .post .inner .ari-titlewrapper {
    justify-content: center;
    min-height: auto;
    margin-top: 46px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: center;
  }

  [data-member-id="113"] .post .inner .ari-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 24px;
  }

  [data-member-id="113"] .post .inner .ari-title-line {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media only screen and (max-width: 380px) {
  [data-member-id="113"] .post .inner .ari-title {
    font-size: 22px;
  }
}

.ari-footer-glitch {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.footer-text.ari-footer-glitch {
  line-height: 1;
}

.ari-title[data-text]::before,
.ari-title[data-text]::after,
.ari-title-line[data-text]::before,
.ari-title-line[data-text]::after,
.ari-footer-glitch[data-text]::before,
.ari-footer-glitch[data-text]::after,
.ari-dice-glitch[data-text]::before,
.ari-dice-glitch[data-text]::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  color: var(--ari-title-glitch-color, white);
  background: var(--ari-title-glitch-bg, black);
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  pointer-events: none;
  width: 100%;
}

.ari-title[data-text]::before,
.ari-title-line[data-text]::before,
.ari-footer-glitch[data-text]::before,
.ari-dice-glitch[data-text]::before {
  left: -2px;
  text-shadow: 1px 0 blue;
  animation: ariTitleNoiseB 3s infinite linear alternate-reverse;
  animation-name: var(--ari-title-before-animation, ariTitleNoiseB);
}

.ari-title[data-text]::after,
.ari-title-line[data-text]::after,
.ari-footer-glitch[data-text]::after,
.ari-dice-glitch[data-text]::after {
  left: 2px;
  text-shadow: -1px 0 red;
  animation: ariTitleNoiseA 2s infinite linear alternate-reverse;
  animation-name: var(--ari-title-after-animation, ariTitleNoiseA);
}

.ari-title-line[data-text]::before,
.ari-footer-glitch[data-text]::before,
.ari-dice-glitch[data-text]::before {
  animation-name: var(--ari-title-before-animation, ariTitleLineNoiseB);
}

.ari-title-line[data-text]::after,
.ari-footer-glitch[data-text]::after,
.ari-dice-glitch[data-text]::after {
  animation-name: var(--ari-title-after-animation, ariTitleLineNoiseA);
}

.ari-footer-glitch[data-text]::before {
  left: -3px;
  text-shadow: 2px 0 blue;
}

.ari-footer-glitch[data-text]::after {
  left: 3px;
  text-shadow: -2px 0 red;
}

.ari-basic-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
  margin-bottom: 30px;
  color: var(--ari-post-text, white);
  font-family: var(--ari-title-font-family, 'UnifrakturCook'), sans-serif;
  font-size: 24px;
  line-height: 1;
}

.ari-basic-footer::before,
.ari-basic-footer::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ari-post-accent, var(--ari-primary));
}

.ari-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
  margin-bottom: 30px;
  font-family: var(--ari-title-font-family, 'UnifrakturCook'), sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ari-post-text, white);
}

.ari-end .line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--ari-post-accent, var(--ari-primary));
  position: relative;
}

.footer-text {
  font-size: 24px;
  line-height: 0px;
  letter-spacing: 1.31px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}

.footer-star {
  color: var(--ari-post-accent, var(--ari-primary));
  font-size: 24px;
  line-height: 0px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}

/* Arikel: marcador minimo para chats mobile antes de que el JS arme la UI final. */
.ari-basic-phone-chat {
  max-width: 360px;
  margin: 34px auto;
  padding: 18px;
  background: #111318;
  border: 1px solid rgba(37, 195, 175, .34);
  color: var(--ari-white);
}

.ari-basic-phone-chat p,
.ari-basic-phone-chat q {
  display: block;
  max-width: 84%;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 16px;
  line-height: 1.4;
  quotes: none;
}

.ari-basic-phone-chat q {
  margin-left: auto;
  background: rgba(37, 195, 175, .24);
}

.ari-basic-phone-chat q::before,
.ari-basic-phone-chat q::after {
  content: "";
}

/* Arikel: marcador minimo para chats sin marco de celular. */
.ari-basic-chat {
  max-width: 620px;
  margin: 28px auto;
  padding: 4px 0;
  color: var(--ari-white);
}

.ari-basic-chat p,
.ari-basic-chat q {
  display: block;
  max-width: 74%;
  margin: 8px 0;
  padding: 10px 13px;
  border-radius: 17px;
  line-height: 1.42;
  quotes: none;
}

.ari-basic-chat p {
  background: rgba(255, 255, 255, .09);
}

.ari-basic-chat q {
  margin-left: auto;
  background: rgba(37, 195, 175, .24);
}

.ari-basic-chat q::before,
.ari-basic-chat q::after {
  content: "";
}

.ari-chat {
  width: min(60%, 620px);
  margin: 30px auto;
  color: var(--ari-white);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ari-chat__screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
}

.ari-chat__message {
  display: flex;
  width: 100%;
}

.ari-chat__message--them {
  justify-content: flex-start;
}

.ari-chat__message--me {
  justify-content: flex-end;
}

.ari-chat__bubble {
  position: relative;
  max-width: 74%;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}

.ari-chat__message--them .ari-chat__bubble {
  border-bottom-left-radius: 6px;
  background: rgba(255, 255, 255, .09);
  color: rgba(250, 250, 250, .95);
}

.ari-chat__message--me .ari-chat__bubble {
  border-color: rgba(37, 195, 175, .26);
  border-bottom-right-radius: 6px;
  background: rgba(37, 195, 175, .24);
  color: var(--ari-white);
  box-shadow:
          0 8px 18px rgba(0, 0, 0, .16),
          inset 0 0 0 1px rgba(37, 195, 175, .12);
}

.ari-chat__bubble p,
.ari-chat__bubble q {
  margin: 0;
  quotes: none;
}

.ari-chat__bubble q::before,
.ari-chat__bubble q::after {
  content: "";
}

.ari-phone-chat {
  width: min(100%, 380px);
  margin: 38px auto;
  color: var(--ari-white);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ari-phone-chat__device {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 520px;
  padding: 8px;
  border: 1px solid rgba(37, 195, 175, .42);
  border-radius: 30px;
  background:
          radial-gradient(circle at 15% 0%, rgba(37, 195, 175, .20), transparent 32%),
          linear-gradient(160deg, #171a20 0%, #08090d 100%);
  box-shadow:
          0 22px 54px rgba(0, 0, 0, .42),
          inset 0 0 0 8px #050609,
          inset 0 0 0 2px rgba(255, 255, 255, .04),
          0 0 22px rgba(37, 195, 175, .12);
}

.ari-phone-chat__device::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 3;
  width: 92px;
  height: 18px;
  border-radius: 0 0 14px 14px;
  background: #050609;
  transform: translateX(-50%);
}

.ari-phone-chat__device::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 22px;
  background:
          repeating-linear-gradient(
                  0deg,
                  transparent,
                  transparent 2px,
                  rgba(255, 255, 255, .025) 2px,
                  rgba(255, 255, 255, .025) 4px
          );
  pointer-events: none;
}

.ari-phone-chat__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 16px;
  font-size: 11px;
  color: rgba(250, 250, 250, .72);
  letter-spacing: .02em;
  background: rgba(33, 33, 33);
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(37, 195, 175, .16);
}

.ari-phone-chat__status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(250, 250, 250, .82);
  font-size: 10px;
  line-height: 1;
}

.ari-phone-chat__signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 16px;
  height: 11px;
}

.ari-phone-chat__signal::before {
  content: "";
  display: block;
  width: 3px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: rgba(250, 250, 250, .82);
  box-shadow:
          5px -3px 0 rgba(250, 250, 250, .82),
          10px -6px 0 rgba(250, 250, 250, .82);
}

.ari-phone-chat__battery {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
  padding: 1px;
  border: 1px solid rgba(250, 250, 250, .72);
  border-radius: 3px;
}

.ari-phone-chat__battery::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -4px;
  width: 2px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: rgba(250, 250, 250, .72);
}

.ari-phone-chat__battery-level {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ari-primary);
  box-shadow: 0 0 7px rgba(37, 195, 175, .28);
}

.ari-phone-chat__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 195, 175, .16);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 -1px 0 rgba(37, 195, 175, .18);
}

.ari-phone-chat__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(37, 195, 175, .52);
  border-radius: 50%;
  background:
          linear-gradient(rgba(37, 195, 175, .18), rgba(37, 195, 175, .18)),
          #15191f center/cover no-repeat;
  color: var(--ari-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(37, 195, 175, .20);
}

.ari-phone-chat__contact {
  min-width: 0;
}

.ari-phone-chat__title {
  overflow: hidden;
  color: var(--ari-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ari-phone-chat__subtitle {
  margin-top: 2px;
  color: rgba(37, 195, 175, .82);
  font-size: 11px;
  line-height: 1.2;
}

.ari-phone-chat__screen {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px;
  min-height: 348px;
  padding: 16px 6px 14px;
  overflow: hidden;
  background: #0d1015;
  background-size:
          auto,
          auto,
          18px 18px,
          18px 18px,
          auto;
  box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .03),
          inset 0 -1px 0 rgba(0, 0, 0, .32);
}

.ari-phone-chat__message {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
}

.ari-phone-chat__message--them {
  justify-content: flex-start;
}

.ari-phone-chat__message--me {
  justify-content: flex-end;
}

.ari-phone-chat__bubble {
  position: relative;
  max-width: 78%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 18px;
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .20);
}

.ari-phone-chat__message--them .ari-phone-chat__bubble {
  border-bottom-left-radius: 6px;
  background: rgba(255, 255, 255, .10);
  color: rgba(250, 250, 250, .94);
}

.ari-phone-chat__message--me .ari-phone-chat__bubble {
  border-color: rgba(37, 195, 175, .28);
  border-bottom-right-radius: 6px;
  background: linear-gradient(135deg, rgba(37, 195, 175, .92), rgba(20, 122, 122, .86));
  color: #021312;
  font-weight: 500;
}

.ari-phone-chat__bubble p,
.ari-phone-chat__bubble q {
  margin: 0;
  quotes: none;
}

.ari-phone-chat__bubble q::before,
.ari-phone-chat__bubble q::after {
  content: "";
}

.ari-phone-chat__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, .045);
}

.ari-phone-chat__input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  color: rgba(250, 250, 250, .46);
  font-size: 12px;
  line-height: 1;
}

.ari-phone-chat__send {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ari-primary);
  overflow: hidden;
}

.ari-phone-chat__send::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #041210;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 55%, 25% 45%);
  transform: translateX(1px);
}

.ari-phone-chat__send::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 1px;
  background: rgba(37, 195, 175, .55);
  transform: translate(-2px, 0);
}

@media only screen and (max-width: 420px) {
  .ari-phone-chat {
    width: 100%;
    margin: 30px auto;
  }

  .ari-phone-chat__device {
    min-height: 0;
    border-radius: 24px;
  }

  .ari-phone-chat__bubble {
    max-width: 84%;
  }

  .ari-chat__bubble {
    max-width: 84%;
  }
}