/* ══════════════════════════════════════════════════════════════
   SALAH SAMBUNG — chat.css
   Tampilan percakapan ala WhatsApp (dark mode)
   ══════════════════════════════════════════════════════════════ */

.screen--chat {
  background:
    radial-gradient(70% 60% at 50% 0%, #0d1a1f, #030507 70%);
  align-items: center;
  justify-content: center;
}

.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: 100dvh;
  background: #0b141a;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 640px) and (min-height: 720px) {
  .phone {
    height: min(920px, 94dvh);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    box-shadow: 0 40px 120px -30px #000, 0 0 0 8px rgba(0, 0, 0, .35);
  }
}

/* ── status bar ────────────────────────────────────────────── */
.statusbar {
  position: relative;
  height: calc(26px + var(--safe-t));
  padding: var(--safe-t) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0b141a;
  font-size: 11.5px;
  font-weight: 600;
  color: #e9edef;
  flex: 0 0 auto;
  letter-spacing: .01em;
  z-index: 3;
}
.statusbar__notch {
  position: absolute;
  left: 50%; top: calc(3px + var(--safe-t));
  width: 74px; height: 18px;
  transform: translateX(-50%);
  background: #000;
  border-radius: 0 0 12px 12px;
  opacity: .55;
}
.statusbar__icons { display: flex; align-items: center; gap: 5px; color: #dfe8ee; }
.statusbar__time { min-width: 42px; }

/* ── header ────────────────────────────────────────────────── */
.wa-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 8px 7px 6px;
  background: #202c33;
  flex: 0 0 auto;
  min-height: 58px;
  z-index: 3;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.wa-back {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: #aebac1; font-size: 1.35rem;
  border-radius: 50%;
  transition: background .2s;
  flex: 0 0 38px;
}
.wa-back:hover { background: rgba(255, 255, 255, .06); }
.wa-peer { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: default; }
.wa-avatar {
  width: 39px; height: 39px; flex: 0 0 39px;
  border-radius: 50%;
  overflow: hidden;
  background: #111b21;
  position: relative;
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-peer__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.wa-name {
  font-size: 15.5px; font-weight: 500; color: #e9edef;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.wa-status { font-size: 11.5px; color: #8696a0; line-height: 1.2; }
.wa-status.is-online { color: #8696a0; }
.wa-status.is-typing { color: #06cf9c; }
.wa-tools { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.wa-tool {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: #aebac1; font-size: 1rem;
  border-radius: 50%;
  transition: background .2s;
}
.wa-tool:hover { background: rgba(255, 255, 255, .06); }
.wa-tool--menu { font-size: 1.3rem; }

/* ── body / wallpaper ──────────────────────────────────────── */
.chat-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background-color: #0b141a;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(32, 44, 51, .22), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.022' stroke-width='1.4'%3E%3Cpath d='M22 34h24a5 5 0 015 5v12a5 5 0 01-5 5H34l-7 7v-7a5 5 0 01-5-5V39a5 5 0 015-5z'/%3E%3Ccircle cx='104' cy='42' r='9'/%3E%3Cpath d='M104 33c5 0 9 4 9 9'/%3E%3Cpath d='M58 104l7-7 7 7M65 97v15'/%3E%3Cpath d='M116 108c0-8 6-14 14-14'/%3E%3Cpath d='M118 114c0-7 5-12 12-12'/%3E%3Cpath d='M28 112h4v10h-4zM34 108h4v14h-4zM40 104h4v18h-4z'/%3E%3Cpath d='M92 74l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 150px 150px;
  overflow: hidden;
}
.chat-body::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% 40%, transparent 50%, rgba(0, 0, 0, .32));
  z-index: 1;
}
.chat-scroll {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
.chat-scroll::-webkit-scrollbar { width: 5px; }
.chat-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }

/* ── chip sistem ───────────────────────────────────────────── */
.chip-center {
  align-self: center;
  max-width: 90%;
  text-align: center;
  background: #182229;
  color: #8696a0;
  font-size: 11px;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: 7px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .16);
  margin: 10px auto;
  animation: chip-in .25s var(--ease);
}
.chip-center--lock { font-size: 10.5px; color: #99a8b0; background: #182229; display: flex; gap: 5px; align-items: center; }
.chip-center--lock svg { flex: 0 0 auto; opacity: .75; }
@keyframes chip-in { from { opacity: 0; transform: translateY(-4px); } }

/* ── baris & bubble ────────────────────────────────────────── */
.msg-row {
  display: flex;
  margin-bottom: 2px;
  animation: bubble-in .22s var(--ease);
}
.msg-row--them { justify-content: flex-start; padding-right: 26px; }
.msg-row--me { justify-content: flex-end; padding-left: 26px; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.bubble {
  position: relative;
  max-width: 100%;
  min-width: 74px;
  padding: 6px 8px 6px 9px;
  border-radius: 8px;
  background: #202c33;
  color: #e9edef;
  font-size: 14.3px;
  line-height: 1.34;
  letter-spacing: .002em;
  box-shadow: 0 1px .5px rgba(0, 0, 0, .22);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg-row--me .bubble { background: #005c4b; }
.bubble.has-tail::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0; height: 0;
  border-style: solid;
}
.msg-row--them .bubble.has-tail { border-top-left-radius: 0; }
.msg-row--them .bubble.has-tail::before {
  left: -7px;
  border-width: 0 8px 8px 0;
  border-color: transparent #202c33 transparent transparent;
}
.msg-row--me .bubble.has-tail { border-top-right-radius: 0; }
.msg-row--me .bubble.has-tail::before {
  right: -7px;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent transparent #005c4b;
}

.bubble__text { display: inline; }
.bubble__text b, .bubble__text strong { font-weight: 600; }
.bubble__text i, .bubble__text em { color: #d4dee3; }

.bubble__sender {
  font-size: 12.2px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 2px 1px;
  line-height: 1.25;
}
.c-nindi { color: #ffb3c1; }
.c-dimas { color: #8fd3ff; }
.c-unknown { color: #ff9b9b; }

.bubble__meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 1px;
  margin-left: 10px;
  float: right;
  transform: translateY(3px);
  font-size: 10.4px;
  color: rgba(233, 237, 239, .55);
  line-height: 1.3;
  white-space: nowrap;
}
.msg-row--me .bubble__meta { color: rgba(233, 237, 239, .62); }
.ticks { display: inline-flex; margin-left: 1px; color: #8696a0; }
.ticks svg { width: 15px; height: 11px; }
.msg-row--me .ticks { color: #53bdeb; }

/* foto */
.bubble--media { padding: 3px 3px 4px; max-width: min(268px, 72vw); background: #202c33; }
.msg-row--me .bubble--media { background: #005c4b; }
.media-frame {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: #0a1114;
  cursor: zoom-in;
}
.media-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
}
.media-frame .media-tag {
  position: absolute;
  top: 7px; left: 7px;
  font-family: var(--font-type);
  font-size: 9px; letter-spacing: .12em;
  color: rgba(235, 245, 248, .8);
  background: rgba(0, 0, 0, .5);
  padding: 2px 5px;
  border-radius: 2px;
  backdrop-filter: blur(3px);
}
.media-frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .34));
}
.bubble--media .bubble__caption {
  padding: 5px 5px 2px;
  font-size: 13.8px;
  line-height: 1.34;
}
.bubble--media .bubble__meta {
  position: absolute;
  right: 7px; bottom: 7px;
  margin: 0;
  transform: none;
  float: none;
  background: rgba(0, 0, 0, .42);
  padding: 1px 5px;
  border-radius: 4px;
  color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(2px);
}
.bubble--media .meta-inside { position: relative; }

/* voice note */
.bubble--audio { padding: 7px 11px 6px 8px; min-width: 224px; }
.audio-row { display: flex; align-items: center; gap: 9px; }
.audio-play {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: #00a884;
  color: #0b141a;
  display: grid; place-items: center;
  font-size: .8rem;
  border: 0;
  transition: transform .15s, background .2s;
}
.audio-play:hover { transform: scale(1.06); }
.audio-wave { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.audio-wave i {
  width: 2px;
  background: rgba(233, 237, 239, .42);
  border-radius: 1px;
  animation: wave-idle 2.6s ease-in-out infinite;
}
.audio-wave i:nth-child(3n) { height: 9px; animation-delay: .2s; }
.audio-wave i:nth-child(3n+1) { height: 15px; animation-delay: .5s; }
.audio-wave i:nth-child(3n+2) { height: 5px; animation-delay: .8s; }
@keyframes wave-idle { 50% { transform: scaleY(.55); } }
.audio-dur { font-size: 11px; color: rgba(233, 237, 239, .6); min-width: 26px; }
.audio-mic { color: rgba(233, 237, 239, .5); font-size: .8rem; }

/* system error / red */
.chip-center--alert { color: #f0b6b6; background: rgba(80, 18, 22, .55); border: 1px solid rgba(226, 59, 59, .25); font-style: normal; }

/* ── typing ────────────────────────────────────────────────── */
.typing-bubble {
  align-self: flex-start;
  background: #202c33;
  border-radius: 0 8px 8px 8px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px;
  position: relative;
  animation: bubble-in .2s var(--ease);
}
.typing-bubble::before {
  content: "";
  position: absolute; top: 0; left: -7px;
  border-width: 0 8px 8px 0;
  border-style: solid;
  border-color: transparent #202c33 transparent transparent;
}
.typing-bubble i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8696a0;
  animation: dot 1.3s infinite;
}
.typing-bubble i:nth-child(2) { animation-delay: .18s; }
.typing-bubble i:nth-child(3) { animation-delay: .36s; }
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── reply tray ────────────────────────────────────────────── */
.reply-tray {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 6px;
  background: linear-gradient(180deg, rgba(11, 20, 26, .92), #0b141a);
  border-top: 1px solid rgba(255, 255, 255, .06);
  max-height: 36dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.reply-tray.is-on { display: flex; animation: tray-in .25s var(--ease); }
@keyframes tray-in { from { opacity: 0; transform: translateY(6px); } }
.reply-label {
  font-size: .5rem; letter-spacing: .2em; color: #6b7b85;
  padding: 2px 4px 3px; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.reply-label::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .06); }
.reply-btn {
  position: relative;
  text-align: left;
  padding: 10px 34px 10px 12px;
  background: #1a252d;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  color: #e3ebf0;
  font-size: 13.4px;
  line-height: 1.4;
  transition: background .18s, border-color .18s, transform .12s;
  flex: 0 0 auto;
}
.reply-btn::after {
  content: "›";
  position: absolute; right: 13px; top: 50%;
  transform: translateY(-52%);
  color: #6f808a; font-size: 1rem;
}
.reply-btn:hover { background: #22313a; border-color: rgba(255, 255, 255, .16); }
.reply-btn:active { transform: scale(.994); }
.reply-btn--risk { border-color: rgba(226, 59, 59, .24); }
.reply-btn--risk::after { color: #e28d8d; }
.reply-btn small { display: block; font-size: 10px; color: #798a94; margin-top: 2px; letter-spacing: .02em; }
.reply-btn--ghost { text-align: center; padding: 9px; border-style: dashed; color: #93a3ad; }
.reply-btn--ghost::after { display: none; }

.chat-endbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 8px;
  flex-wrap: wrap;
}
.chat-endbar .status-chip {
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid currentColor; border-radius: 3px;
}
.chat-endbar .btn-mini {
  font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .1em;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: #dfe8ee;
  background: rgba(255, 255, 255, .04);
}
.chat-endbar .btn-mini:hover { background: rgba(255, 255, 255, .09); }

/* ── input WhatsApp ────────────────────────────────────────── */
.wa-input {
  flex: 0 0 auto;
  background: #0b141a;
  padding: 5px 8px calc(6px + var(--safe-b));
  border-top: 1px solid rgba(255, 255, 255, .045);
}
.wa-input__row { display: flex; align-items: flex-end; gap: 6px; }
.wa-icon {
  width: 40px; height: 42px; flex: 0 0 40px;
  display: grid; place-items: center;
  color: #8696a0;
  font-size: 1.16rem;
  border-radius: 50%;
  transition: background .18s;
}
.wa-icon:hover { background: rgba(255, 255, 255, .05); }
.wa-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #202c33;
  border-radius: 21px;
  padding: 0 6px 0 14px;
  min-height: 42px;
  transition: box-shadow .2s;
}
.wa-field:focus-within { box-shadow: inset 0 0 0 1px rgba(0, 168, 132, .3); }
.wa-field input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  color: #e9edef;
  font-size: 14.5px;
  outline: 0;
}
.wa-field input::placeholder { color: #8696a0; }
.wa-field input:disabled { color: #6c7a83; }
.wa-icon--inline { width: 34px; height: 34px; flex-basis: 34px; font-size: 1rem; }
.wa-send {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: #00a884;
  color: #0b141a;
  display: grid; place-items: center;
  font-size: 1.05rem;
  transition: transform .15s, background .2s, opacity .2s;
}
.wa-send:hover { background: #06cf9c; }
.wa-send:active { transform: scale(.94); }
.wa-send.is-disabled { background: #202c33; color: #6c7a83; }
.wa-send.is-voice { background: #00a884; }
.wa-input__hint {
  text-align: center;
  font-size: 9.5px;
  color: #5d6c75;
  padding: 3px 0 1px;
  letter-spacing: .02em;
  min-height: 14px;
}
.wa-input__hint.is-live { color: #06cf9c; }

/* ── jump button ───────────────────────────────────────────── */
.chat-jump {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 4;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #202c33;
  color: #aebac1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.chat-jump.is-on { opacity: 1; pointer-events: auto; }
.chat-jump.is-on:hover { transform: translateY(-2px); }

/* ── mode mencekam ─────────────────────────────────────────── */
.phone.is-unnerving .chat-body {
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(60, 12, 16, .26), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.022' stroke-width='1.4'%3E%3Cpath d='M22 34h24a5 5 0 015 5v12a5 5 0 01-5 5H34l-7 7v-7a5 5 0 01-5-5V39a5 5 0 015-5z'/%3E%3Ccircle cx='104' cy='42' r='9'/%3E%3Cpath d='M58 104l7-7 7 7M65 97v15'/%3E%3Cpath d='M92 74l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/%3E%3C/g%3E%3C/svg%3E");
}
.phone.is-unnerving .wa-avatar img { filter: grayscale(1) contrast(1.35) brightness(.8); }
.phone.is-unnerving .wa-name { animation: name-glitch 6s infinite steps(1); }
@keyframes name-glitch {
  0%, 91%, 100% { text-shadow: none; transform: none; }
  92% { text-shadow: -2px 0 #e23b3b, 2px 0 #2bb3c7; transform: translateX(1px); }
  93% { text-shadow: 2px 0 #e23b3b, -2px 0 #2bb3c7; transform: translateX(-1px); }
  94% { text-shadow: none; transform: none; }
}
.phone.is-glitching { animation: phone-glitch .38s steps(2); }
@keyframes phone-glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-3px, 1px); filter: hue-rotate(-12deg) contrast(1.08); }
  40% { transform: translate(2px, -2px); filter: invert(.04) hue-rotate(8deg); }
  60% { transform: translate(-1px, 0); filter: none; }
  80% { transform: translate(1px, 1px); filter: brightness(1.1); }
  100% { transform: translate(0); filter: none; }
}
.phone.is-glitching::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 0, 0, .04) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

/* bubble versi entitas */
.bubble--wrong { background: #1b1f22; border: 1px solid rgba(226, 59, 59, .16); }
.msg-row--them .bubble--wrong.has-tail::before { border-color: transparent #1b1f22 transparent transparent; }
.bubble--wrong .bubble__text { color: #e5d6d6; }

/* ── layar kecil ───────────────────────────────────────────── */
@media (max-width: 380px) {
  .chat-scroll { padding-inline: 10px; }
  .msg-row--them { padding-right: 16px; }
  .msg-row--me { padding-left: 16px; }
  .bubble { font-size: 13.8px; }
  .wa-tool { width: 32px; }
}
@media (max-height: 620px) {
  .reply-tray { max-height: 30dvh; }
  .wa-input__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-row, .typing-bubble, .chip-center { animation: none; }
}