/*
  Gaya render chatlog.
  Direplikasi dari css/app.css pada repo ulasbayraktar/chatlog-magician:
  Arial, font-weight 700, base color #fff, outline hitam 4 arah,
  font smoothing dimatikan, letter-spacing 0.
*/

.output {
  --chatlog-bg: #000000;
  --chatlog-line-height: 18px;
  --chatlog-box-width: 0px;
  --chatlog-box-left: 0px;
  --chatlog-box-height: 0px;

  display: inline-block;
  margin: 0;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: var(--chatlog-line-height);
  letter-spacing: 0;
  /* SAMP (GDI) tidak memakai kerning maupun ligatur; browser memakainya secara default. */
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: 'kern' 0, 'liga' 0, 'clig' 0;
  text-rendering: optimizeSpeed;
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  -webkit-font-smoothing: none;
  white-space: pre-wrap;
  word-break: break-word;
}

/*
  Backing box per baris.
  Referensi memakai .generated{display:inline-block} sehingga kotak hanya
  selebar teks. display:table dipakai di sini karena shrink-to-fit sekaligus
  memaksa pergantian baris tanpa elemen .clear tambahan, dan tidak menambah
  leading vertikal sehingga kotak antar baris menempel tanpa celah.
*/
.output .line {
  display: table;
  max-width: 100%;
  position: relative;
  min-height: var(--chatlog-line-height);
  padding-right: var(--chatlog-box-width);
  background-color: transparent;
}

.output .line-box {
  position: absolute;
  z-index: 0;
  top: calc(var(--chatlog-box-height) * -0.5);
  right: 0;
  left: calc(var(--chatlog-box-left) * -1);
  height: calc(100% + var(--chatlog-box-height));
  background-color: var(--chatlog-bg);
  pointer-events: none;
}

.output .line-text { position: relative; z-index: 1; }

.output.no-background .line-box { display: none; }

.output:empty::before {
  content: 'Paste chatlog di panel kiri untuk melihat hasilnya di sini.';
  color: #5a5a60;
  font-weight: 400;
  font-style: italic;
  text-shadow: none;
  font-size: 15px;
}

/* Sensor */
.censor-bar {
  background: #000;
  color: transparent;
  border-radius: 2px;
  padding: 0 1px;
  text-shadow: none;
}

.censor-pixel {
  filter: blur(4px);
  user-select: none;
}