/* ═══════════════════════════════════════════════════════
   BASE — font & box-sizing
═══════════════════════════════════════════════════════ */
/* Karafuru brand palette (matches website header gradient):
   Pink-orange: #f97316 → #ec4899
   Purple nav:  #5e6b78 → #5e6b78
   Dark bg:     #0f0a1e / #160e27 / #1e1535
*/

.krc-app,
.krc-app *{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ── Base app (home/list pages) — light & clean ────── */
.krc-app{
  width:100%;
  background:transparent;
  color:#1a1a2e;
  position:relative;
}

/* ═══════════════════════════════════════════════════════
   HOME HEADER
═══════════════════════════════════════════════════════ */
.krc-home-header{
  padding:16px 16px 10px;
}
.krc-home-header__titles{
  display:flex;flex-direction:column;gap:2px;
}
.krc-home-logo{
  font-size:17px;font-weight:700;
  color:#5e6b78;
  letter-spacing:-.01em;
}
.krc-home-tagline{
  font-size:11px;font-weight:500;
  color:#9ca3af;
}

/* ═══════════════════════════════════════════════════════
   SECTION LABELS
═══════════════════════════════════════════════════════ */
.krc-section-label{
  padding:10px 16px 6px;
  font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#9ca3af;
  display:flex;align-items:center;gap:5px;
}
.krc-section-label__icon{ font-size:11px;letter-spacing:0; }

/* ═══════════════════════════════════════════════════════
   MEMBER CARDS (home list — light style)
═══════════════════════════════════════════════════════ */
.krc-member-list{
  display:flex;flex-direction:column;
  padding:0 10px 16px;
  gap:6px;
}
.krc-member-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  text-decoration:none !important;color:inherit;
  background:#ffffff;
  border-radius:14px;
  border:1px solid #f0f0f0;
  transition:box-shadow .15s, border-color .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  min-height:72px;
  box-sizing:border-box;
}
.krc-member-row:active,
.krc-member-row:hover{
  border-color:#c4cdd5;
  box-shadow:0 2px 8px rgba(94,107,120,.10);
}
.krc-member-row--locked{ opacity:.55; }

.krc-member-row__avatar-wrap{
  position:relative;flex-shrink:0;
  width:52px;height:52px;
}
.krc-avatar{
  width:52px;height:52px;border-radius:50%;
  object-fit:cover;display:block;
  border:2px solid #e5e7eb;
}
.krc-avatar--placeholder{
  background:#5e6b78;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.krc-avatar--fan{
  background:linear-gradient(135deg,#a855f7,#6366f1);
  color:#fff;font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.krc-dot{
  position:absolute;bottom:1px;right:1px;
  width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;
}
.krc-dot--on{ background:#22c55e; }
.krc-dot--off{ background:transparent; }

.krc-member-row__info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:2px;
}
/* Kill theme p margins inside rows */
.krc-member-row__info p,
.krc-member-row__top p,
.krc-member-row__bottom p {
  margin:0 !important;
  padding:0 !important;
}
.krc-member-row__top{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.krc-member-row__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.krc-member-row__name{
  font-size:15px !important;font-weight:700 !important;
  margin:0 !important;padding:0 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#111827 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  flex:1;min-width:0;
  display:block;
}
.krc-member-row__sub{
  font-size:12px !important;color:#8a9aa8 !important;
  margin:0 !important;padding:0 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:400 !important;
  text-decoration:none !important;
  flex:1;min-width:0;
  line-height:1.2 !important;
  display:block;
}
.krc-member-row__sub.krc-presence--on{ color:#16a34a;font-weight:500; }
.krc-member-row__sub.krc-presence--status{ color:#a16207 !important;font-weight:500 !important; }
.krc-member-row__presence{
  font-size:10px;font-weight:500;color:#b0b7c0;white-space:nowrap;
  text-decoration:none;
}
.krc-member-row__presence.krc-presence--on{ color:#16a34a; }

/* Unread badge */
.krc-unread-badge{
  flex-shrink:0;
  background:#22c55e;color:#fff;
  font-size:10px;font-weight:700;
  min-width:18px;height:18px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;
  line-height:1;
}
.krc-unread-badge--hidden{ display:none; }

/* Inbox date label */
.krc-inbox-date{
  font-size:11px;color:#22c55e;font-weight:600;flex-shrink:0;white-space:nowrap;
}

/* Remove underlines from all krc links */
.krc-app a, .krc-app a:hover, .krc-app a:visited{
  text-decoration:none !important;
}

.krc-member-row__badge{
  flex-shrink:0;font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:20px;letter-spacing:.01em;
}
.krc-badge--on{
  background:#5e6b78;
  color:#fff;
}
.krc-badge--off{ background:#f3f4f6;color:#9ca3af; }

.krc-member-row__price{
  flex-shrink:0;font-size:12px;font-weight:700;
  color:#5e6b78;
}
.krc-member-row__price span{
  font-size:10px;font-weight:500;color:#9ca3af;
}
.krc-member-row__price-wrap{
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px;
}
.krc-member-row__price-old{
  font-size:10px;font-weight:600;color:#b5b9bd;
  text-decoration:line-through;
}
.krc-member-row__price-wrap .krc-member-row__price{ color:#166534; }

.krc-member-row--unavailable{ cursor:default; opacity:.7; }
.krc-member-row--unavailable .krc-avatar{ filter:grayscale(70%); }
.krc-member-row--unavailable:active,
.krc-member-row--unavailable:hover{ background:transparent; }
.krc-member-row__unavailable-badge{
  flex-shrink:0;font-size:10px;font-weight:700;color:#92400e;
  background:#fff7ed;border:1px solid #fed7aa;
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.krc-member-row__unavailable-reason{
  font-size:11.5px;color:#b45309;margin:3px 0 0;font-weight:600;line-height:1.4;
}
.krc-member-row__slot-left{
  font-size:11px;color:#4338ca;margin:3px 0 0;font-weight:700;
}

/* ═══════════════════════════════════════════════════════
   NOTICES & PILLS (shared)
═══════════════════════════════════════════════════════ */
.krc-notice{
  margin:10px 12px;padding:11px 14px;
  border-radius:12px;font-size:13px;line-height:1.4;font-weight:600;
}
.krc-notice-ok{ background:#f0fdf4;color:#166534;border:1px solid #bbf7d0; }
.krc-notice-warn{ background:#fff7ed;color:#92400e;border:1px solid #fed7aa; }
.krc-notice-err{ background:#fef2f2;color:#991b1b;border:1px solid #fecaca; }

.krc-btn-pill{
  display:inline-block;
  background:#5e6b78;
  color:#fff;font-size:15px;font-weight:800;
  padding:13px 28px;border-radius:50px;
  border:none;cursor:pointer;text-decoration:none;
  text-align:center;letter-spacing:.01em;
}
.krc-btn-pill--full{ display:block;width:100%;padding:14px; }
.krc-btn-pill:active{ opacity:.85; }

/* ═══════════════════════════════════════════════════════
   LOGIN GATE
═══════════════════════════════════════════════════════ */
.krc-login-gate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:70vh;padding:40px 24px;text-align:center;
}
.krc-login-logo{ font-size:48px;color:#5e6b78;margin-bottom:12px; }
.krc-login-title{ font-size:22px;font-weight:900;color:#111827;margin:0 0 6px; }
.krc-login-sub{ font-size:14px;color:#6b7280;margin:0 0 28px;font-weight:600; }

/* ═══════════════════════════════════════════════════════
   SUBSCRIBE / PAYMENT CARDS (light)
═══════════════════════════════════════════════════════ */
.krc-subscribe-wrap{
  flex:1;overflow-y:auto;padding:24px 18px 40px;
  background:#f9fafb;
}
.krc-sub-card{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px;
}
.krc-sub-card__photo{
  width:90px;height:90px;border-radius:50%;object-fit:cover;
  border:3px solid #dde2e6;margin-bottom:4px;
}
.krc-sub-card__name{ font-size:20px;font-weight:900;color:#111827;margin:0; }
.krc-sub-card__tag{ font-size:13px;color:#9ca3af;margin:0;font-weight:600; }
.krc-sub-card__bio{ font-size:13px;color:#6b7280;line-height:1.5;margin:6px 0 0; }
.krc-sub-card__price{ font-size:28px;font-weight:900;color:#5e6b78;margin:10px 0 4px; }
.krc-sub-card__price span{ font-size:14px;font-weight:600;color:#9ca3af; }
.krc-sub-card__price-old{
  font-size:15px;font-weight:700;color:#b5b9bd;
  text-decoration:line-through;margin:10px 0 -2px;
}
.krc-sub-card__price--discount{ color:#166534; }
.krc-payment-info{
  background:#f3f3f3;border-left:3px solid #5e6b78;
  padding:12px 14px;border-radius:0 10px 10px 0;
  font-size:13px;color:#5e6b78;line-height:1.5;
  margin:16px 0;width:100%;text-align:left;font-weight:600;
}
.krc-payment-qr{
  max-width:190px;border-radius:14px;
  border:2px solid #dde2e6;margin:0 0 16px;
}
.krc-sub-form{ width:100%;display:flex;flex-direction:column;gap:12px;margin-top:4px; }
.krc-file-label{
  display:block;width:100%;
  background:#f3f3f3;border:2px dashed #8a9aa8;
  border-radius:12px;padding:14px;
  font-size:13px;color:#5e6b78;text-align:center;cursor:pointer;font-weight:700;
}
.krc-file-label:active{ background:#eef0f2; }
.krc-file-input{ display:none; }

/* ── Pending box ──────────────────────────────────── */
.krc-pending-box{ text-align:center;padding:40px 20px; }
.krc-pending-box__icon{ font-size:48px;margin-bottom:12px; }
.krc-pending-box__title{ font-size:18px;font-weight:900;color:#111827;margin:0 0 6px; }
.krc-pending-box__sub{ font-size:14px;color:#6b7280;line-height:1.5;margin:0 0 12px; }
.krc-pending-box__date{ font-size:12px;color:#9ca3af; }

/* ═══════════════════════════════════════════════════════
   CHAT ROOM — LIGHT MINIMALIST
═══════════════════════════════════════════════════════ */
:root{
  --krc-bg:        #f3f3f3; /* Karafuru secondary background */
  --krc-surface:   #ffffff;
  --krc-border:    #e5e5ea;
  --krc-text-main: #1c1c1e;
  --krc-text-sub:  #8e8e93;
  --krc-pink:      #5e6b78;
  --krc-purple:    #5e6b78;
  --krc-me-bubble: #454a6b;  /* dark blue-violet for "me" bubbles */
  --krc-them-bubble: #5c6975; /* dark slate for "them" bubbles */
  --krc-send-btn:  #5e6b78;  /* solid send button */
  --krc-badge-on:  #5e6b78;  /* solid badge */
}
.krc-app--chat{
  /* PWA-safe fullscreen layout */
  position:fixed !important;
  top:0;
  left:0 !important;
  right:0 !important;
  bottom:auto;
  width:100% !important;
  max-width:100% !important;
  /* Gunakan --krc-vh dari JS (VisualViewport) sebagai sumber utama,
     fallback ke dvh, lalu vh */
  height:100vh;
  height:100dvh;
  height:calc(var(--krc-vh, 1vh) * 100);
  margin:0 !important;
  padding:0 !important;
  z-index:9999 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  overscroll-behavior:none;
  background:var(--krc-bg);
  transform:none !important;
}


/* ── Neutralize WordPress theme wrapper interference ───
   Theme containers seperti .site-content, .entry-content,
   .wp-block-group sering punya overflow:hidden atau padding
   yang merusak position:fixed child elements.
──────────────────────────────────────────────────────── */
body:has(.krc-app--chat),
html:has(.krc-app--chat){
  overflow:hidden !important;
  height:100% !important;
  /* Cegah iOS bounce scroll yang geser layout */
  overscroll-behavior:none !important;
  -webkit-overflow-scrolling:auto !important;
}
/* Pastikan semua ancestor .krc-app--chat tidak block fixed */
.krc-app--chat ~ *,
.krc-app--chat + * {
  display:none !important;
}

/* Sembunyikan page title & elemen Astra theme saat chat aktif */
body:has(.krc-app--chat) .entry-title,
body:has(.krc-app--chat) .page-title,
body:has(.krc-app--chat) .post-title,
body:has(.krc-app--chat) .ast-breadcrumbs-wrapper,
body:has(.krc-app--chat) .site-header,
body:has(.krc-app--chat) .ast-above-header-wrap,
body:has(.krc-app--chat) .main-header-bar,
body:has(.krc-app--chat) .site-footer,
body:has(.krc-app--chat) .ast-site-footer,
body:has(.krc-app--chat) .widget-area,
body:has(.krc-app--chat) #masthead,
body:has(.krc-app--chat) #colophon,
body:has(.krc-app--chat) .wp-block-post-title {
  display:none !important;
}

/* Hapus semua padding/margin dari wrapper Astra */
body:has(.krc-app--chat) #primary,
body:has(.krc-app--chat) #main,
body:has(.krc-app--chat) .site-content,
body:has(.krc-app--chat) .entry-content,
body:has(.krc-app--chat) .ast-container,
body:has(.krc-app--chat) .container,
body:has(.krc-app--chat) article {
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* Chat header — WhatsApp style, frosted glass agar menyatu natural dgn wallpaper */
.krc-chat-header{
  display:block;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
  flex-shrink:0;
  z-index:10;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  position:relative;
  /* Safe area hanya untuk notch/dynamic island, tidak dimunculkan di Android */
  padding-top:env(safe-area-inset-top,0px);
}
/* Inner row konten header */
.krc-chat-header__inner{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px 9px 4px;
  min-height:54px;
  box-sizing:border-box;
}
.krc-chat-back{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  color:var(--krc-pink);text-decoration:none;
  transition:background .15s;
  margin-left:0;
}
.krc-chat-back:active{ background:rgba(236,72,153,.1); }
.krc-chat-back svg{ display:block; }
.krc-chat-avatar{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  display:block;
}
.krc-chat-avatar--clickable{
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.krc-chat-avatar--clickable:hover{
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  transform:scale(1.05);
}
.krc-chat-avatar--clickable:active{ transform:scale(.96); }
.krc-chat-avatar--clickable:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}
div.krc-chat-avatar{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#a855f7,#6366f1);
  color:#fff;font-size:16px;font-weight:700;
}
.krc-chat-header__info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:1px;
  overflow:hidden;
}
.krc-chat-header__name{
  font-size:15.5px;font-weight:700;margin:0;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--krc-text-main);
  display:block;max-width:100%;
}
.krc-chat-header__tag{
  font-size:12px;color:var(--krc-text-sub);margin:0;
  line-height:1.25;font-weight:400;
  display:flex;align-items:center;min-height:14px;
}
.krc-chat-header__status{
  font-size:11px;font-weight:600;flex-shrink:0;
  color:var(--krc-text-sub);
  display:none;
}
.krc-status--on{ color:#34c759; }
.krc-status--off{ color:var(--krc-text-sub); }
.krc-chat-header__status.krc-status--on{ display:none; }

/* Messages area — WA style, only vertical scroll */
.krc-messages{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:8px 10px 6px;
  background:transparent; /* wallpaper di layer terpisah (#krc-wp-layer) */
  display:flex;flex-direction:column;gap:2px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  position:relative;
  max-width:100%;
  width:100%;
  z-index:1;
  will-change:scroll-position;
}
/* Wallpaper layer — absolute langsung di dalam .krc-app--chat (position:fixed,
   tinggi viewport stabil), BUKAN di dalam .krc-chat-body. .krc-chat-body
   ukurannya berubah-ubah tiap kali bar sibling (recording bar, typing
   indicator) muncul/hilang — kalau wallpaper nempel di situ, background-size:
   cover bakal recalculate & keliatan "zoom" tiap toggle. Dengan nempel di
   level app, ukurannya tetap konstan, cuma area yang kelihatan (window
   .krc-messages) yang berubah — persis seperti WhatsApp. */
#krc-wp-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--krc-bg);
  background-image:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:filter .2s;
  will-change:transform;
}
.krc-messages > *{ position:relative;z-index:1; }
.krc-messages__loading,
.krc-messages__empty{
  text-align:center;color:var(--krc-text-sub);font-size:13px;
  margin:auto;padding:30px 0;line-height:1.6;font-weight:600;
}
.krc-load-older-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:fit-content;margin:10px auto 8px;
  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--krc-surface);color:var(--krc-text-sub);
  border:1px solid var(--krc-border);
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  pointer-events:none; /* auto-trigger only, no manual click needed */
  opacity:.85;
}
@keyframes krc-spin{ to{ transform:rotate(360deg); } }
.krc-load-older-btn--loading .krc-load-older-spinner{
  display:inline-block;width:11px;height:11px;
  border:2px solid var(--krc-border);
  border-top-color:var(--krc-primary);
  border-radius:50%;
  animation:krc-spin .7s linear infinite;
}
.krc-load-older-spinner{ display:none; }


/* Bubbles — WhatsApp style */
/* Bubble wrap */
.krc-bubble-wrap{
  display:flex;
  max-width:75%;
  align-self:flex-start;
  position:relative;
  margin-bottom:2px;
  margin-left:8px; /* ruang untuk ekor "them" agar tidak terpotong */
  box-sizing:border-box;
  min-width:0;
}
.krc-bubble-wrap--me{
  align-self:flex-end;
  flex-direction:row-reverse;
  margin-left:0;
  margin-right:8px; /* ruang untuk ekor "me" */
}
/* Sedikit jarak ekstra saat ganti pengirim */
.krc-bubble-wrap + .krc-bubble-wrap--me,
.krc-bubble-wrap--me + .krc-bubble-wrap:not(.krc-bubble-wrap--me){
  margin-top:6px;
}

/* Column: bubble di atas, reactions di bawah */
.krc-bubble-col{
  display:flex;flex-direction:column;
  max-width:100%;
}

/* Base bubble — "them" */
.krc-bubble{
  /* "them" bubble — slate grey, digelapkan agar tetap jelas di atas wallpaper foto */
  padding:7px 9px 5px 9px;
  border-radius:0 8px 8px 8px; /* pojok kiri-atas lancip = titik "ekor" */
  background:#5c6975;
  border:none;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  max-width:100%;
  word-break:break-word;
  overflow-wrap:break-word;
  position:relative;
  transform:translateZ(0);
}
/* Ekor (tail) bubble "them" — segitiga kiri atas, WA style */
.krc-bubble--them::before{
  content:'';
  position:absolute;
  top:0;left:-7px;
  width:0;height:0;
  border-style:solid;
  border-width:0 7px 8px 0;
  border-color:transparent #5c6975 transparent transparent;
}

/* Me bubble — beda hue (biru-ungu gelap) agar langsung terbedakan dari bubble "them" */
.krc-bubble--me{
  background:#454a6b;
  border:none;
  border-radius:8px 0 8px 8px; /* pojok kanan-atas lancip = titik "ekor" */
  box-shadow:0 2px 6px rgba(0,0,0,.28);
}
/* Ekor bubble "me" — segitiga kanan atas */
.krc-bubble--me::before{
  content:'';
  position:absolute;
  top:0;right:-7px;
  width:0;height:0;
  border-style:solid;
  border-width:8px 7px 0 0;
  border-color:#454a6b transparent transparent transparent;
}
.krc-bubble--uploading{ opacity:.6; }

.krc-peer-presence-tag{ display:inline-flex;align-items:center;gap:5px;min-height:14px;max-width:220px; }
.krc-peer-online-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#22c55e;
  flex-shrink:0;
  box-shadow:0 0 0 2px rgba(34,197,94,.25);
}
.krc-peer-online-label{
  font-size:11.5px;color:#16a34a;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-peer-offline-label{
  font-size:11.5px;color:#9ca3af;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-peer-presence-tag--status .krc-peer-offline-label{ color:#a16207;font-weight:500; }
.krc-status-reminder-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-left:2px;
  background:none;border:none;cursor:pointer;
  font-size:13px;line-height:1;padding:0;
  border-radius:50%;flex-shrink:0;
  opacity:.75;
}
.krc-status-reminder-btn:hover{ opacity:1;background:rgba(0,0,0,.05); }
.krc-status-reminder-btn--active{ opacity:1; }
.krc-status-reminder-btn:disabled{ opacity:.4;cursor:default; }

.krc-bubble-text{
  font-size:14px;line-height:1.45;
  display:block;word-break:break-word;
  overflow-wrap:break-word;
  font-weight:400;
}
.krc-bubble--them .krc-bubble-text{ color:#fff; }
.krc-bubble--me .krc-bubble-text{ color:#fff; }

/* Time + receipt — WA style: float kanan, "menempel" di bawah teks */
.krc-bubble-time{
  font-size:11.5px;
  display:inline-block;
  float:right;
  margin-top:4px;
  margin-left:6px;
  margin-bottom:-2px;
  line-height:1.2;
  white-space:nowrap;
  vertical-align:bottom;
  opacity:.75;
}
.krc-bubble--them .krc-bubble-time{ color:rgba(255,255,255,.75); }
.krc-bubble--me .krc-bubble-time{ color:rgba(255,255,255,.85); }

/* Clearfix untuk float timestamp */
.krc-bubble::after{
  content:'';display:table;clear:both;
}

/* Receipt checkmark — WA style biru kecil */
.krc-receipt{
  font-size:13px;margin-left:2px;
  color:rgba(255,255,255,.75);font-weight:700;
  vertical-align:middle;letter-spacing:-1px;
}
.krc-receipt--read{ color:#a5f3fc; } /* cyan lebih lembut dari biru keras */

.krc-bubble-sticker{
  width:140px;height:140px;object-fit:contain;
  border-radius:12px;display:block;background:transparent;
}
.krc-bubble--me:has(.krc-bubble-sticker),
.krc-bubble--them:has(.krc-bubble-sticker){
  background:transparent!important;
  box-shadow:none!important;
  padding:4px 0!important;
}
.krc-bubble-img{
  max-width:240px;width:100%;border-radius:10px;
  display:block;cursor:zoom-in;
  margin-bottom:2px;
}
.krc-bubble-video{
  max-width:260px;width:100%;border-radius:10px;
  display:block;margin-bottom:2px;background:#000;
}
.krc-bubble-audio{
  width:210px;max-width:100%;
  border-radius:8px;outline:none;
  accent-color:var(--krc-pink);
}

/* ── Link preview card di dalam bubble chat ─────────────────
   Dipicu kalau pesan mengandung URL — sebelumnya link cuma teks
   polos yang ditap tidak merespon apa-apa. Kartu ini nge-bleed
   sampai tepi bubble (margin negatif = padding bubble) supaya
   menyatu rapi, dengan sudut yang mengikuti "ekor" bubble. ── */
.krc-link-preview{
  display:block;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.08);
  overflow:hidden;cursor:pointer;
  margin:-7px -9px 6px -9px;
  transition:background .15s ease;
  max-width:260px;
}
.krc-link-preview:hover,
.krc-link-preview:active{ background:rgba(255,255,255,.15); }
.krc-bubble--them .krc-link-preview{ border-radius:0 8px 7px 7px; }
.krc-bubble--me .krc-link-preview{ border-radius:8px 0 7px 7px; }
.krc-link-preview__thumb{
  display:block;width:100%;height:132px;object-fit:cover;
  background:rgba(255,255,255,.08);
}
.krc-link-preview__body{ padding:8px 10px 9px; }
.krc-link-preview--noimg .krc-link-preview__body{ padding-top:9px; }
.krc-link-preview__domain{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.6);font-weight:800;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-link-preview__title{
  font-size:13.5px;font-weight:700;color:#fff;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.krc-link-preview__desc{
  font-size:12px;color:rgba(255,255,255,.78);line-height:1.35;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Skeleton shimmer saat metadata masih di-fetch dari server */
.krc-link-preview--loading{ cursor:default; }
.krc-link-preview__thumb--skeleton{ height:132px; }
.krc-link-preview__line{ height:9px;border-radius:5px;background:rgba(255,255,255,.16);margin:5px 10px; }
.krc-link-preview__line--title{ width:64%;margin-top:9px; }
.krc-link-preview__line--desc{ width:85%; }
.krc-link-preview__thumb--skeleton,
.krc-link-preview__line{ position:relative;overflow:hidden; }
.krc-link-preview__thumb--skeleton::after,
.krc-link-preview__line::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-100%);
  animation:krcLinkShimmer 1.3s ease-in-out infinite;
}
@keyframes krcLinkShimmer{ 100%{ transform:translateX(100%); } }
/* Link inline di dalam teks pesan biasa (bukan kartu) */
.krc-msg-link{
  color:#bfe0ff;text-decoration:underline;text-underline-offset:2px;
  word-break:break-all;
}
.krc-msg-link:active{ opacity:.75; }

/* Input bar — WhatsApp style */
.krc-input-bar{
  display:flex !important;
  visibility:visible !important;
  align-items:flex-end;gap:6px;
  padding:6px 8px;
  /* Safe area inset untuk notch/home indicator */
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  background:#f3f3f3;
  border-top:1px solid #e0e0e0;
  /* flex-shrink:0 + order terakhir = selalu di bawah */
  flex-shrink:0 !important;
  order:999;
  min-height:52px;
  max-height:200px;
  box-sizing:border-box;
  /* Jangan biarkan tema WP override */
  position:relative !important;
  z-index:5;
  width:100% !important;
}
/* Wrapper tombol media (galeri, kamera, stiker) */
.krc-media-btns{
  display:flex;align-items:center;gap:0;
  overflow:hidden;
  /* Dilebarkan agar cukup untuk tombol ke-4 (stiker) yang di-inject oleh
     plugin karafuru-sticker. Sebelumnya di-hardcode 132px (pas 3 tombol)
     sehingga tombol stiker selalu terpotong/tertutup oleh overflow:hidden. */
  max-width:260px; /* cukup untuk ±6 tombol × 44px, aman untuk penambahan tombol baru */
  transition:max-width .22s ease, opacity .18s ease;
  opacity:1;
}
.krc-input-bar.krc-typing .krc-media-btns{
  max-width:0;opacity:0;pointer-events:none;
}
/* Expand chevron: muncul saat media-btns collapse */
.krc-expand-btn{ display:none!important; }
.krc-input-bar.krc-typing .krc-expand-btn{ display:inline-flex!important; }
/* Voice btn: tampak saat kosong, sembunyikan saat ada teks */
.krc-voice-only{ transition:opacity .15s; }
.krc-input-bar.krc-typing .krc-voice-only{ display:none!important; }
/* Send btn: kebalikannya */
.krc-input-bar.krc-typing .krc-send-btn{ display:inline-flex!important; }
.krc-input-icon{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:transparent;border:none;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s;padding:0;
  -webkit-appearance:none;appearance:none;
}
.krc-input-icon svg{ display:block;width:22px;height:22px;flex-shrink:0;color:#8e8e93; }
.krc-input-icon:active{ background:rgba(0,0,0,.08); }
.krc-input-textarea{
  flex:1;resize:none;
  background:#ffffff;border:none;
  color:var(--krc-text-main);font-size:15px;font-weight:400;
  border-radius:22px;padding:8px 14px;
  outline:none;max-height:130px;
  font-family:inherit;line-height:1.4;
  -webkit-appearance:none;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.krc-input-textarea::placeholder{ color:#b0b0b8;font-weight:400; }
.krc-input-textarea:focus{ background:#fff; }
.krc-send-btn{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:#5e6b78;
  border:none;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  box-shadow:0 2px 8px rgba(124,58,237,.25);
  transition:opacity .15s,transform .1s;
}
.krc-send-btn svg{ display:block;width:20px;height:20px; }
.krc-send-btn:active{ transform:scale(.9); }
.krc-send-btn:disabled{ opacity:.35;cursor:not-allowed; }

/* Recording bar */
.krc-recording-bar{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--krc-bg,#f3f3f3);
  border-top:1px solid var(--krc-border,#e0e0e0);
  flex-shrink:0 !important;
  width:100% !important;
  box-sizing:border-box;
  min-height:52px;
  /* Safe area inset untuk notch/home indicator, samakan dengan input bar */
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  /* WAJIB: samakan dengan .krc-input-bar (position:relative + z-index:5).
     Tanpa ini, elemen non-positioned kepaint DI BAWAH #krc-wp-layer
     (position:absolute; z-index:0) — akibatnya rekaman tetap berjalan
     di JS tapi bar-nya ketutup wallpaper & terlihat "tidak ada tampilan". */
  position:relative !important;
  z-index:5;
}
.krc-rec-timer{
  color:var(--krc-text-main,#1c1c1e);font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;min-width:32px;
}
.krc-rec-wave{
  flex:1;min-width:0;height:28px;display:block;
}
.krc-rec-btn{
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;flex-shrink:0;
  background:none;padding:0;
}
.krc-rec-btn--delete{
  width:32px;height:32px;color:var(--krc-text-sub,#8e8e93);border-radius:50%;
}
.krc-rec-btn--delete:hover{ color:#ef4444;background:rgba(0,0,0,.05); }
.krc-rec-btn--delete:active{ transform:scale(.9); }
.krc-rec-btn--send{
  width:38px;height:38px;border-radius:50%;
  background:#5e6b78;flex-shrink:0;
  box-shadow:0 2px 8px rgba(124,58,237,.25);
}
.krc-rec-btn--send:hover{ opacity:.9; }
.krc-rec-btn--send:active{ transform:scale(.92); }

/* ── Scrollbar ─────────────────────────────────────── */
.krc-messages::-webkit-scrollbar{ width:3px; }
.krc-messages::-webkit-scrollbar-track{ background:transparent; }
.krc-messages::-webkit-scrollbar-thumb{ background:var(--krc-border);border-radius:4px; }

/* ── Waveform audio player ─────────────────────────── */
/* ── Voice note / Audio player — WA style ──────────── */
.krc-audio-wrap{
  width:230px;max-width:100%;
  display:flex;flex-direction:column;
}
.krc-waveform-wrap{
  display:flex;align-items:center;gap:10px;
  padding:4px 2px 2px;
  min-height:52px;
}
/* Play button — besar di kiri, persis WA */
.krc-wf-play{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.25);
  border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
  padding:0;
}
.krc-bubble--me .krc-wf-play{ background:rgba(255,255,255,.3); }
.krc-bubble--them .krc-wf-play{ background:rgba(255,255,255,.2); }
.krc-wf-play:active{ background:rgba(255,255,255,.4); }
.krc-wf-play svg{ display:block;width:18px;height:18px; }

/* Waveform bars + duration column */
.krc-wf-mid{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:4px;
}
.krc-wf-bars{
  display:flex;align-items:center;gap:1.5px;height:28px;
  cursor:pointer;
  touch-action:pan-y; /* izinkan horizontal scrub tanpa block vertical scroll */
}
.krc-wf-bar{
  flex:1;border-radius:2px;
  background:rgba(255,255,255,.35);
  transition:background .05s;
  min-width:2px;
}
.krc-bubble--me .krc-wf-bar{ background:rgba(255,255,255,.4); }
.krc-wf-bar.krc-wf-bar--played{ background:rgba(255,255,255,.9); }
.krc-bubble--me .krc-wf-bar.krc-wf-bar--played{ background:#fff; }
/* Duration di bawah waveform, kiri */
.krc-wf-dur{
  font-size:11px;font-weight:700;
  color:rgba(255,255,255,.75);
  flex-shrink:0;
  text-align:left;
  line-height:1;
}

/* ── Pinned message bar ────────────────────────────── */
.krc-pinned-bar{
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;flex-shrink:0;
  /* Solid seperti .krc-reply-bar/.krc-recording-bar — sebelumnya pakai
     rgba tipis (.08) sehingga wallpaper chat privat tembus di baliknya
     dan teks pesan pinned jadi susah dibaca. */
  background:var(--krc-bg,#f3f3f3);
  border-bottom:1px solid var(--krc-border,#e0e0e0);
  cursor:pointer;
  transition:background .12s;
  /* Samakan dengan .krc-input-bar/.krc-recording-bar — tanpa ini,
     bar ini kepaint DI BAWAH #krc-wp-layer (position:absolute;
     z-index:0) dan jadi ketutup wallpaper (terlihat gelap/kosong). */
  position:relative !important;
  z-index:5;
}
.krc-pinned-bar:hover{ background:var(--krc-border,#e5e5ea); }
.krc-pinned-bar__icon{
  flex-shrink:0;color:var(--krc-pink);opacity:.8;
}
.krc-pinned-bar__text{
  flex:1;min-width:0;
  font-size:12px;font-weight:600;color:var(--krc-text-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-pinned-bar__jump{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:var(--krc-pink);padding:2px 4px;border-radius:6px;
  display:flex;align-items:center;pointer-events:none;
}

/* ── Highlight flash saat jump ke pesan pinned ─────── */
@keyframes krc-highlight-pulse{
  0%  { background:rgba(249,115,22,.18); }
  70% { background:rgba(249,115,22,.08); }
  100%{ background:transparent; }
}
.krc-bubble-wrap--highlight .krc-bubble{
  animation:krc-highlight-pulse 1.5s ease forwards;
  border-radius:16px;
}

/* ── Typing indicator ─────────────────────────────── */
.krc-typing-indicator{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;flex-shrink:0;
  /* Sejajar dengan .krc-app--chat sebagai flex item (bukan di dalam
     .krc-chat-body) — tanpa `order` dia jatuh ke order:0 default dan
     nongol di dekat header, bukan di atas input seperti WA. Taruh
     tepat sebelum reply-bar(998)/input-bar(999). Position+z-index
     wajib juga, cegah ketutup #krc-wp-layer (lihat .krc-reply-bar). */
  order:997;
  position:relative !important;
  z-index:5;
}
.krc-typing-bubble{
  display:flex;align-items:center;gap:4px;
  background:var(--krc-surface);
  border:1px solid var(--krc-border);
  border-radius:18px 18px 18px 4px;
  padding:8px 12px;
}
.krc-typing-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--krc-pink);opacity:.5;
  animation:krc-typing-bounce .9s infinite;
}
.krc-typing-dot:nth-child(2){ animation-delay:.15s; }
.krc-typing-dot:nth-child(3){ animation-delay:.3s; }
@keyframes krc-typing-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.5; }
  40%{ transform:translateY(-5px); opacity:1; }
}
.krc-typing-label{ font-size:12px;color:var(--krc-text-sub);font-weight:600; }

/* ── Emoji reaction pills ─────────────────────────── */
.krc-reactions{
  display:flex;flex-wrap:wrap;gap:2px;
  margin-top:3px;
  margin-bottom:2px;
  padding:0 4px;
  min-height:0;
}
.krc-bubble-wrap--me .krc-bubble-col .krc-reactions{ justify-content:flex-end; }
.krc-bubble-col .krc-reactions{ justify-content:flex-start; }
.krc-react-pill{
  display:inline-flex;align-items:center;gap:1px;
  background:var(--krc-surface);
  border:1px solid var(--krc-border);
  border-radius:999px;padding:0px 5px;
  font-size:12px;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  line-height:1.6;
  min-height:20px;
}
.krc-react-pill span{ font-size:10px;font-weight:700;color:var(--krc-text-sub);margin-left:1px; }
.krc-react-pill:active{ transform:scale(.92); }
.krc-react-pill--mine{
  background:rgba(236,72,153,.1);
  border-color:var(--krc-pink);
}
.krc-react-pill--mine span{ color:var(--krc-pink); }

/* ── Emoji picker ─────────────────────────────────── */
.krc-emoji-picker{
  position:fixed;z-index:9999;
  display:flex;gap:4px;
  background:var(--krc-surface);
  border:1px solid var(--krc-border);
  border-radius:999px;padding:6px 10px;
  box-shadow:0 8px 32px rgba(0,0,0,.22);
  animation:krc-pop .15s cubic-bezier(.34,1.56,.64,1);
}
@keyframes krc-pop{ from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
.krc-emoji-btn{
  width:36px;height:36px;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background .1s,transform .1s;
  padding:0;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.krc-emoji-btn:hover{ background:rgba(0,0,0,.07); }
.krc-emoji-btn:active{ transform:scale(1.25); }

/* ── Three-dot menu button (WA style) ───────────────── */
.krc-header-wp-btn{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:rgba(0,0,0,.045);border:none;
  color:var(--krc-text-main);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  padding:0;
  transition:background .15s,transform .1s;
}
.krc-header-wp-btn:active{ background:rgba(0,0,0,.12);transform:scale(.92); }
.krc-header-more-wrap{ position:relative;margin-left:2px;flex-shrink:0; }
.krc-header-dropdown{
  position:absolute;right:0;top:calc(100% + 4px);
  background:var(--krc-surface);border:1px solid var(--krc-border);
  border-radius:12px;min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  overflow:hidden;z-index:100;
  display:none;
}
.krc-header-dropdown.krc-dd--open{ display:block; }
.krc-header-dd-item{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;font-size:13px;font-weight:700;
  color:var(--krc-text-main);text-align:left;
  transition:background .12s;
}
.krc-header-dd-item:active{ background:var(--krc-border); }
.krc-header-dd-item--danger{ color:#ef4444; }

/* ── Search bar ───────────────────────────────────── */
.krc-search-bar{
  display:none;align-items:center;gap:6px;
  padding:7px 12px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  /* Sama seperti .krc-pinned-bar/.krc-recording-bar — cegah ketutup
     #krc-wp-layer saat dibuka lewat menu "Cari Pesan". */
  position:relative !important;
  z-index:5;
}
.krc-search-bar input{
  flex:1;border:none;background:rgba(0,0,0,.06);
  border-radius:20px;padding:6px 12px;font-size:13px;
  outline:none;color:var(--krc-text-main);
  -webkit-appearance:none;
}
.krc-search-count{
  font-size:11px;font-weight:700;color:#6b7280;
  white-space:nowrap;min-width:40px;text-align:center;
}
.krc-search-nav,.krc-search-close{
  background:none;border:none;cursor:pointer;
  color:#6b7280;padding:4px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.krc-search-nav:active,.krc-search-close:active{ background:rgba(0,0,0,.08); }
mark.krc-search-hl{
  background:#fde68a;color:#1f2937;border-radius:2px;padding:0 1px;
}
mark.krc-search-hl--active{
  background:#f59e0b;color:#fff;
}

/* ── Report modal ─────────────────────────────────── */
#krc-report-modal{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.0);pointer-events:none;
  transition:background .2s;
}
#krc-report-modal.krc-report-modal--open{
  background:rgba(0,0,0,.5);pointer-events:all;
}
.krc-report-box{
  background:#fff;border-radius:20px 20px 0 0;
  width:100%;max-width:480px;
  padding:24px 20px max(20px,env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.krc-report-modal--open .krc-report-box{ transform:translateY(0); }
.krc-report-title{ font-size:16px;font-weight:900;margin:0 0 4px;color:#111; }
.krc-report-sub{ font-size:13px;color:#6b7280;margin:0 0 14px; }
.krc-report-reasons{ display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
.krc-report-reasons label{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;color:#374151;
  cursor:pointer;padding:9px 12px;
  border:1.5px solid #e5e7eb;border-radius:10px;
  transition:border-color .12s,background .12s;
}
.krc-report-reasons label:has(input:checked){
  border-color:#ef4444;background:#fff5f5;
}
.krc-report-reasons input[type=radio]{ accent-color:#ef4444;width:16px;height:16px; }
#krc-report-note{
  width:100%;border:1.5px solid #e5e7eb;border-radius:10px;
  padding:10px 12px;font-size:13px;resize:none;
  box-sizing:border-box;font-family:inherit;color:#374151;
  margin-bottom:16px;outline:none;
  transition:border-color .15s;
}
#krc-report-note:focus{ border-color:#ef4444; }
.krc-report-actions{ display:flex;gap:10px; }
.krc-report-cancel{
  flex:1;padding:12px;border-radius:12px;border:1.5px solid #e5e7eb;
  background:#fff;font-size:14px;font-weight:700;color:#6b7280;cursor:pointer;
}
.krc-report-submit{
  flex:2;padding:12px;border-radius:12px;border:none;
  background:#ef4444;color:#fff;font-size:14px;font-weight:700;cursor:pointer;
  transition:opacity .15s;
}
.krc-report-submit:disabled{ opacity:.6; }

/* ── Daily reminder overlay ───────────────────────── */
#krc-reminder-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.0);pointer-events:none;
  transition:background .3s;
}
#krc-reminder-overlay.krc-reminder--in{
  background:rgba(0,0,0,.5);pointer-events:all;
}
.krc-reminder-box{
  background:#fff;border-radius:20px;
  width:calc(100% - 40px);max-width:340px;
  padding:28px 24px 22px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:scale(.92);opacity:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.krc-reminder--in .krc-reminder-box{ transform:scale(1);opacity:1; }
.krc-reminder-icon{ font-size:38px;margin-bottom:12px; }
.krc-reminder-msg{
  font-size:14px;line-height:1.6;color:#374151;margin:0 0 20px;font-weight:500;
}
.krc-reminder-ok{
  background:#5e6b78;color:#fff;border:none;
  border-radius:12px;padding:11px 28px;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:opacity .15s;
}
.krc-reminder-ok:active{ opacity:.8; }

/* ── Wallpaper modal ──────────────────────────────── */
.krc-wallpaper-modal{
  position:fixed;inset:0;z-index:9998;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;opacity:0;
  transition:opacity .2s;
}
.krc-wallpaper-modal--open{
  pointer-events:all;opacity:1;
  background:rgba(0,0,0,.45);
}
.krc-wallpaper-modal__box{
  background:var(--krc-surface);
  border-radius:20px 20px 0 0;
  width:100%;max-width:480px;
  padding:20px 20px max(20px,env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.krc-wallpaper-modal--open .krc-wallpaper-modal__box{ transform:translateY(0); }
.krc-wallpaper-modal__header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.krc-wallpaper-modal__title{ font-size:16px;font-weight:800;color:var(--krc-text-main); }
.krc-wallpaper-modal__close{
  background:var(--krc-border);border:none;
  width:28px;height:28px;border-radius:50%;
  color:var(--krc-text-sub);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.krc-wallpaper-modal__options{
  display:flex;gap:10px;margin-bottom:16px;
}
.krc-wp-opt{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--krc-bg);border:1px solid var(--krc-border);
  border-radius:14px;padding:14px 8px;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--krc-text-main);
  transition:border-color .15s,background .15s;
}
.krc-wp-opt:active{ background:var(--krc-border); }
.krc-wp-opt__icon{ font-size:20px; }
.krc-wallpaper-color-wrap{ margin-bottom:12px; }
.krc-color-picker{
  width:100%;height:48px;border:none;border-radius:12px;cursor:pointer;padding:0;
}
.krc-wallpaper-brightness{ margin-top:4px; }
.krc-wp-brightness-label{
  display:flex;justify-content:space-between;
  font-size:13px;font-weight:700;color:var(--krc-text-sub);
  margin-bottom:8px;
}
.krc-brightness-slider{
  width:100%;-webkit-appearance:none;appearance:none;
  height:4px;border-radius:2px;
  background:#dde2e6;
  outline:none;cursor:pointer;
}
.krc-brightness-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--krc-purple);border:none;cursor:pointer;
}
.krc-brightness-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--krc-purple);border:none;cursor:pointer;
}

/* ── Wallpaper Live Preview ──────────────────────────── */
.krc-wp-preview{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  height:130px;
  margin-bottom:14px;
  border:1.5px solid var(--krc-border);
  display:flex;align-items:center;
}
.krc-wp-preview__bg{
  position:absolute;inset:0;
  background-color:#f3f3f3;
  background-size:cover;background-position:center;
  transition:background-color .2s,filter .2s;
  z-index:0;
}
.krc-wp-preview__bubbles{
  position:relative;z-index:1;
  width:100%;
  display:flex;flex-direction:column;gap:6px;
  padding:10px 12px;
}
/* "them" side — left */
.krc-wp-preview__bubble--them{
  align-self:flex-start;
  background:#8a9aa8;color:#fff;
  font-size:11px;font-weight:700;
  padding:6px 10px;
  border-radius:0 10px 10px 10px;
  max-width:70%;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
/* "me" side — right */
.krc-wp-preview__bubble--me{
  align-self:flex-end;
  background:#5e6b78;color:#fff;
  font-size:11px;font-weight:700;
  padding:6px 10px;
  border-radius:10px 0 10px 10px;
  max-width:70%;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* Color swatch inside button */
.krc-wp-color-swatch{
  width:22px;height:22px;
  border-radius:50%;display:inline-block;
  background:#5e6b78;
  border:2px solid rgba(0,0,0,.08);
  transition:background .2s;
}

/* ── Chat body wrapper (messages + scroll btn) ──────── */
.krc-chat-body{
  flex:1 1 0% !important;
  min-height:0 !important;
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
  width:100%;
  order:1;
}
.krc-chat-body .krc-messages{
  flex:1;min-height:0;
}
/* bubble-wrap box-sizing sudah di blok utama di atas */

/* ── Scroll-to-bottom button ────────────────────────── */
.krc-scroll-btn{
  position:absolute;
  bottom:12px;left:50%;
  transform:translateX(-50%) translateY(16px);
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  background:var(--krc-surface);
  border:1px solid var(--krc-border);
  color:var(--krc-pink);
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  z-index:10;
  padding:0;
  -webkit-appearance:none;appearance:none;
}
.krc-scroll-btn--visible{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.krc-scroll-btn svg{ display:block; }
.krc-scroll-btn:active{ transform:translateX(-50%) scale(.9); }

/* ── Lightbox ────────────────────────────────────────── */
.krc-lightbox{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.krc-lightbox--open{
  opacity:1;pointer-events:auto;
}
.krc-lightbox__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.krc-lightbox__box{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  align-items:center;gap:12px;
  max-width:min(92vw,560px);
  width:100%;
  transform:scale(.94);
  transition:transform .25s;
}
.krc-lightbox--open .krc-lightbox__box{
  transform:scale(1);
}
.krc-lightbox__toolbar{
  display:flex;align-items:center;justify-content:flex-end;
  gap:8px;width:100%;
  padding:0 4px;
}
.krc-lb-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:13px;font-weight:700;
  padding:7px 14px;border-radius:20px;
  cursor:pointer;transition:background .15s;
  -webkit-appearance:none;appearance:none;
  font-family:inherit;
}
.krc-lb-btn svg{ flex-shrink:0; }
.krc-lb-btn:hover{ background:rgba(255,255,255,.22); }
.krc-lb-btn:active{ background:rgba(255,255,255,.08); }
.krc-lb-btn--close{
  width:36px;height:36px;padding:0;
  justify-content:center;border-radius:50%;
}
.krc-lightbox__img{
  max-width:100%;
  max-height:calc(100svh - 120px);
  border-radius:14px;
  object-fit:contain;
  display:block;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.krc-lightbox__video{
  max-width:100%;
  max-height:calc(100svh - 120px);
  border-radius:14px;
  display:block;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  background:#000;
}

/* ═══════════════════════════════════════════════════════
   MEDIA & FILE GALLERY (per-thread)
═══════════════════════════════════════════════════════ */
.krc-media-gallery{
  position:fixed;inset:0;z-index:10060;
  display:none;align-items:flex-end;justify-content:center;
}
.krc-media-gallery--open{ display:flex; }
.krc-media-gallery__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
}
.krc-media-gallery__box{
  position:relative;width:100%;max-width:520px;
  background:var(--krc-bg,#fff);
  border-radius:18px 18px 0 0;
  max-height:82svh;display:flex;flex-direction:column;
  animation:krc-mg-slideup .25s ease both;
  overflow:hidden;
}
@media (min-width:640px){
  .krc-media-gallery{ align-items:center; }
  .krc-media-gallery__box{ border-radius:18px;max-height:76svh; }
}
@keyframes krc-mg-slideup{
  from{ transform:translateY(24px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.krc-media-gallery__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 10px;font-weight:700;font-size:16px;
  flex-shrink:0;
}
.krc-mg-close{
  background:rgba(0,0,0,.06);border:none;border-radius:50%;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#555;flex-shrink:0;
}
.krc-media-gallery__tabs{
  display:flex;gap:6px;padding:0 18px 12px;flex-shrink:0;
}
.krc-mg-tab{
  flex:1;padding:9px 0;border:none;border-radius:10px;
  background:rgba(0,0,0,.05);color:#666;font-weight:600;font-size:14px;
  cursor:pointer;transition:background .15s,color .15s;
}
.krc-mg-tab--active{
  background:var(--krc-pink,#ff5c8a);color:#fff;
}
.krc-media-gallery__grid{
  flex:1;overflow-y:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  padding:0 3px;
}
.krc-mg-item{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:#eee;cursor:pointer;border:none;padding:0;
}
.krc-mg-item img,.krc-mg-item video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.krc-mg-item__playicon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.15);pointer-events:none;
}
.krc-media-gallery__empty{
  padding:50px 20px;text-align:center;color:#999;font-size:14px;
}
.krc-mg-loadmore{
  margin:12px auto 16px;display:block;
  padding:8px 18px;border-radius:20px;border:1px solid rgba(0,0,0,.12);
  background:transparent;color:#666;font-size:13px;cursor:pointer;flex-shrink:0;
}
.krc-mg-loadmore:hover{ background:rgba(0,0,0,.04); }

.krc-bubble-sticker{
  width:140px;height:140px;object-fit:contain;
  border-radius:12px;display:block;background:transparent;
}
.krc-bubble--me:has(.krc-bubble-sticker),
.krc-bubble--them:has(.krc-bubble-sticker){
  background:transparent!important;
  box-shadow:none!important;
  padding:4px 0!important;
}
.krc-bubble-img{
  cursor:zoom-in;
}

/* ── Link preview card (lihat blok pertama untuk komentar lengkap) ── */
.krc-link-preview{
  display:block;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.08);
  overflow:hidden;cursor:pointer;
  margin:-7px -9px 6px -9px;
  transition:background .15s ease;
  max-width:260px;
}
.krc-link-preview:hover,
.krc-link-preview:active{ background:rgba(255,255,255,.15); }
.krc-bubble--them .krc-link-preview{ border-radius:0 8px 7px 7px; }
.krc-bubble--me .krc-link-preview{ border-radius:8px 0 7px 7px; }
.krc-link-preview__thumb{
  display:block;width:100%;height:132px;object-fit:cover;
  background:rgba(255,255,255,.08);
}
.krc-link-preview__body{ padding:8px 10px 9px; }
.krc-link-preview--noimg .krc-link-preview__body{ padding-top:9px; }
.krc-link-preview__domain{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.6);font-weight:800;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-link-preview__title{
  font-size:13.5px;font-weight:700;color:#fff;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.krc-link-preview__desc{
  font-size:12px;color:rgba(255,255,255,.78);line-height:1.35;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.krc-link-preview--loading{ cursor:default; }
.krc-link-preview__thumb--skeleton{ height:132px; }
.krc-link-preview__line{ height:9px;border-radius:5px;background:rgba(255,255,255,.16);margin:5px 10px; }
.krc-link-preview__line--title{ width:64%;margin-top:9px; }
.krc-link-preview__line--desc{ width:85%; }
.krc-link-preview__thumb--skeleton,
.krc-link-preview__line{ position:relative;overflow:hidden; }
.krc-link-preview__thumb--skeleton::after,
.krc-link-preview__line::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-100%);
  animation:krcLinkShimmer 1.3s ease-in-out infinite;
}
@keyframes krcLinkShimmer{ 100%{ transform:translateX(100%); } }
.krc-msg-link{
  color:#bfe0ff;text-decoration:underline;text-underline-offset:2px;
  word-break:break-all;
}
.krc-msg-link:active{ opacity:.75; }


/* ═══════════════════════════════════════════════════════
   REPLY FEATURE (v1.0.4)
═══════════════════════════════════════════════════════ */

/* Reply bar (above input) — WA style */
.krc-reply-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:#f3f3f3;
  border-top:1px solid #e0e0e0;
  flex-shrink:0 !important;
  order:998;
  min-height:44px;
  width:100% !important;
  box-sizing:border-box;
  /* Sama seperti .krc-pinned-bar/.krc-recording-bar/.krc-search-bar —
     cegah ketutup #krc-wp-layer saat preview reply muncul di atas input. */
  position:relative !important;
  z-index:5;
}
.krc-reply-bar__text{
  flex:1;font-size:13px;font-weight:600;
  color:#5e6b78;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-reply-bar__close{
  background:rgba(0,0,0,.07);border:none;cursor:pointer;
  color:#6b7280;font-size:14px;padding:0;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.krc-reply-bar__close:active{ background:rgba(0,0,0,.15); }

/* Date separator — WA style */
.krc-date-sep{
  display:flex;align-items:center;justify-content:center;
  margin:10px 0 6px;
}
.krc-date-sep span{
  background:rgba(0,0,0,.12);
  color:var(--krc-text-main);
  font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:20px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  letter-spacing:.02em;
}

/* Quoted reply inside bubble */
.krc-reply-preview--quoted{
  font-size:13px;font-weight:600;
  padding:6px 10px;margin-bottom:6px;
  border-left:4px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.12);
  border-radius:6px;
  color:rgba(255,255,255,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
  cursor:pointer;
  transition:background .12s;
}
.krc-reply-preview--quoted:hover{ background:rgba(0,0,0,.22); }

/* Swipe reveal icon (sits behind bubble, revealed on swipe) */
.krc-swipe-reply-icon{
  position:absolute;
  top:50%;transform:translateY(-50%);
  left:-36px;
  width:28px;height:28px;
  border-radius:50%;
  background:#dde2e6;
  border:none;color:#5e6b78;
  font-size:14px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
}
.krc-bubble-wrap--me .krc-swipe-reply-icon{
  left:auto;right:-36px;
  background:#eef0f2;color:#5e6b78;
}
.krc-reply-triggered .krc-swipe-reply-icon{
  opacity:1;
}

/* Bubble itself is draggable via JS transform */
.krc-bubble{
  will-change:transform;
  cursor:default;
}


/* ═══════════════════════════════════════════════════════
   EDIT / DELETE / CONTEXT MENU (v1.0.5)
═══════════════════════════════════════════════════════ */

/* ── Big emoji bubble — WA style ─────────────────── */
.krc-bubble--emoji-only{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:2px 4px !important;
}
.krc-bubble--emoji-only::before{ display:none !important; }
/* Fallback untuk emoji yang tidak ada di peta Fluent — pakai font emoji system */
.krc-bubble--emoji-only .krc-emoji-big{
  font-size:52px;
  line-height:1.1;
  display:block;
}
/* Timestamp untuk emoji-only — warna kontras dengan wallpaper */
.krc-bubble--emoji-only .krc-bubble-time{
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  font-size:10.5px;
}

/* ── Fluent Emoji 3D images ───────────────────────── */
img.krc-fluent-emoji{
  width:20px;height:20px;
  display:inline-block;
  vertical-align:middle;
  margin:0 1px;
  object-fit:contain;
}
/* Di dalam bubble teks — sedikit lebih besar */
.krc-bubble-text img.krc-fluent-emoji{
  width:22px;height:22px;
  vertical-align:-4px;
}
/* Di dalam picker — ukuran tombol */
.krc-emoji-btn img.krc-fluent-emoji{
  width:28px;height:28px;
  margin:0;vertical-align:middle;
  transition:transform .1s;
}
.krc-emoji-btn:hover img.krc-fluent-emoji{ transform:scale(1.15); }
/* Di dalam big emoji bubble — besar */
.krc-bubble--emoji-only .krc-emoji-big img.krc-fluent-emoji{
  width:64px !important;height:64px !important;
  margin:0;vertical-align:middle;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
/* Di reaction pills */
.krc-react-pill img.krc-fluent-emoji{
  width:16px;height:16px;
  vertical-align:-2px;
  margin:0 1px 0 0;
}

/* Deleted bubble — tanpa ekor */
.krc-bubble--deleted{
  opacity:.9;
  background:rgba(40,44,52,.78) !important;
  border:1px dashed rgba(255,255,255,.35) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
}
.krc-bubble--deleted::before{
  display:none !important;
}
.krc-bubble-deleted{
  color:rgba(255,255,255,.65) !important;
  font-style:italic;font-weight:600;
}
.krc-bubble-edited{
  font-size:10px;color:rgba(255,255,255,.5);
  margin-left:5px;font-style:italic;
}

/* Context menu */
.krc-ctx-menu{
  position:fixed;z-index:99999;
  min-width:180px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.16);
  padding:6px;
  opacity:0;pointer-events:none;
  transform:scale(.9) translateY(-4px);
  transition:opacity .15s, transform .15s;
}
.krc-ctx-menu--open{
  opacity:1;pointer-events:auto;
  transform:scale(1) translateY(0);
}
.krc-ctx-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 14px;
  background:none;border:none;cursor:pointer;
  border-radius:10px;
  font-size:14px;font-weight:700;color:#111827;
  font-family:inherit;text-align:left;
  transition:background .12s;
}
.krc-ctx-item:active, .krc-ctx-item:hover{ background:#f3f4f6; }
.krc-ctx-item--danger{ color:#ef4444; }
.krc-ctx-item--danger:active, .krc-ctx-item--danger:hover{ background:#fef2f2; }
.krc-ctx-icon{ width:22px;text-align:center;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.krc-ctx-icon svg{ width:16px;height:16px;stroke:currentColor;flex-shrink:0; }
.krc-ctx-item--danger .krc-ctx-icon svg{ stroke:#ef4444; }

/* Edit modal */
.krc-edit-modal{
  position:fixed;inset:0;z-index:99998;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .2s;
}
.krc-edit-modal--open{
  background:rgba(0,0,0,.45);
  pointer-events:auto;
}
.krc-edit-modal__box{
  width:100%;max-width:540px;
  background:#fff;
  border-radius:22px 22px 0 0;
  padding:20px 18px max(18px, env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.32,0,.67,0);
}
.krc-edit-modal--open .krc-edit-modal__box{
  transform:translateY(0);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.krc-edit-modal__title{
  font-size:15px;font-weight:800;color:#111827;
  margin:0 0 12px;text-align:center;
}
.krc-edit-modal__input{
  width:100%;resize:none;
  background:#f2f2f7;border:none;
  border-radius:14px;padding:12px 14px;
  font-size:14px;font-weight:600;color:#111827;
  font-family:inherit;outline:none;line-height:1.5;
}
.krc-edit-modal__input:focus{ background:#eaeaef; }
.krc-edit-modal__actions{
  display:flex;gap:10px;margin-top:12px;
}
.krc-edit-modal__cancel{
  flex:1;padding:13px;border-radius:50px;
  background:#f2f2f7;border:none;cursor:pointer;
  font-size:14px;font-weight:800;color:#6b7280;font-family:inherit;
}
.krc-edit-modal__save{
  flex:2;padding:13px;border-radius:50px;
  background:#5e6b78;
  border:none;cursor:pointer;
  font-size:14px;font-weight:800;color:#fff;font-family:inherit;
}
.krc-edit-modal__save:disabled{ opacity:.5;cursor:not-allowed; }
.krc-edit-modal__cancel:active{ opacity:.75; }

/* Payment / subscribe pop-up (v1.9.3) — dipicu saat fan memilih member
   dari daftar "Pilih Member", supaya tidak perlu pindah halaman dulu. */
.krc-payment-modal{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .2s;
}
.krc-payment-modal--open{
  background:rgba(0,0,0,.45);
  pointer-events:auto;
}
.krc-payment-modal__box{
  position:relative;
  width:100%;max-width:440px;max-height:88vh;overflow-y:auto;
  background:#fff;
  border-radius:22px 22px 0 0;
  padding:28px 20px max(20px, env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.32,0,.67,0);
  text-align:center;
}
.krc-payment-modal--open .krc-payment-modal__box{
  transform:translateY(0);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.krc-payment-modal__close{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:50%;
  background:#f2f2f7;border:none;cursor:pointer;
  font-size:14px;color:#6b7280;
  display:flex;align-items:center;justify-content:center;
}
.krc-payment-modal__close:active{ opacity:.75; }

/* Delete confirm modal */
.krc-del-modal{
  position:fixed;inset:0;z-index:99998;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .2s;
  padding:20px;
}
.krc-del-modal--open{
  background:rgba(0,0,0,.45);
  pointer-events:auto;
}
.krc-del-modal__box{
  width:100%;max-width:320px;
  background:#fff;border-radius:20px;
  padding:24px 20px 20px;
  text-align:center;
  transform:scale(.88);opacity:0;
  transition:transform .2s, opacity .2s;
}
.krc-del-modal--open .krc-del-modal__box{
  transform:scale(1);opacity:1;
  transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.krc-del-modal__title{
  font-size:17px;font-weight:900;color:#111827;margin:0 0 6px;
}
.krc-del-modal__sub{
  font-size:13px;color:#6b7280;font-weight:600;margin:0 0 20px;line-height:1.5;
}
.krc-del-modal__actions{ display:flex;flex-direction:column;gap:8px; }
.krc-del-modal__cancel{
  padding:13px;border-radius:50px;
  background:#f2f2f7;border:none;cursor:pointer;
  font-size:14px;font-weight:800;color:#6b7280;font-family:inherit;
  width:100%;
}
.krc-del-modal__confirm{
  padding:13px;border-radius:50px;
  background:#ef4444;border:none;cursor:pointer;
  font-size:14px;font-weight:800;color:#fff;font-family:inherit;
  width:100%;
}
.krc-del-modal__confirm--me{
  background:#f97316; /* oranye — lebih ringan dari hapus semua */
}
.krc-del-modal__confirm:disabled{ opacity:.5;cursor:not-allowed; }
.krc-del-modal__cancel:active, .krc-del-modal__confirm:active{ opacity:.8; }

/* ═══════════════════════════════════════════════════════
   SKELETON LOADER — v1.3.0
═══════════════════════════════════════════════════════ */
.krc-skeleton-loader{
  display:flex;flex-direction:column;gap:18px;
  padding:20px 12px;width:100%;box-sizing:border-box;
}
.krc-skeleton-wrap{
  display:flex;align-items:flex-end;gap:8px;
}
.krc-skeleton-wrap--me{
  flex-direction:row-reverse;
}
.krc-skeleton-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--krc-skeleton-base,#e5e7eb);
  flex-shrink:0;
  animation:krc-shimmer 1.4s infinite linear;
}
.krc-skeleton-lines{
  display:flex;flex-direction:column;gap:6px;
  max-width:65%;
}
.krc-skeleton-line{
  height:14px;border-radius:8px;
  background:var(--krc-skeleton-base,#e5e7eb);
  animation:krc-shimmer 1.4s infinite linear;
}
.krc-skeleton-wrap--me .krc-skeleton-line{
  margin-left:auto;
}
@keyframes krc-shimmer{
  0%   { opacity:.55; }
  50%  { opacity:1;   }
  100% { opacity:.55; }
}

/* ═══════════════════════════════════════════════════════
   UPLOAD PROGRESS BUBBLE — v1.3.0
═══════════════════════════════════════════════════════ */
.krc-bubble--uploading{
  opacity:1 !important;
  min-width:180px;
}
.krc-upload-inner{
  display:flex;align-items:center;gap:10px;padding:2px 0;
}
.krc-upload-icon{
  display:flex;align-items:center;opacity:.75;flex-shrink:0;
}
.krc-upload-info{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;
}
.krc-upload-label{
  font-size:13px;font-weight:600;color:inherit;opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-upload-track{
  height:4px;border-radius:4px;
  background:rgba(255,255,255,.25);
  overflow:hidden;
}
.krc-upload-bar{
  height:100%;width:0%;border-radius:4px;
  background:rgba(255,255,255,.85);
  transition:width .15s ease;
}
.krc-upload-pct{
  font-size:11px;font-weight:700;opacity:.8;
  flex-shrink:0;min-width:28px;text-align:right;
}

/* ═══════════════════════════════════════════════════════
   SOUND TOGGLE BUTTON — v1.3.0
═══════════════════════════════════════════════════════ */
.krc-sound-toggle-btn{
  opacity:.7;transition:opacity .15s;
}
.krc-sound-toggle-btn:hover{ opacity:1; }

/* ═══════════════════════════════════════════════════════
   NOTIFICATION BELL + BADGE — v1.4.0
   v1.9.8: dikasih !important di properti krusial supaya kebal dari
   gaya global tema (mis. Astra nge-style SEMUA elemen <button> di
   situs dengan padding/border sendiri via selector polos `button`),
   yang sebelumnya bikin ukuran tombol melar (36×36 jadi ~64×38)
   karena padding besar dari tema ikut kepakai (kita nggak pernah
   set padding sendiri, jadi kalah walk-over meskipun properti lain
   seperti background sudah menang duluan). */
.krc-notif-bell{
  position:relative !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-sizing:border-box !important;
  width:36px !important;height:36px !important;
  min-width:36px !important;max-width:36px !important;
  padding:0 !important;margin:0 !important;
  background:#f3f4f6 !important;border:none !important;cursor:pointer;
  border-radius:50% !important;
  color:#4b5563 !important;
  line-height:1 !important;
  transition:background .15s,color .15s;
  flex-shrink:0;
}
.krc-notif-bell:hover{ background:#e5e7eb !important;color:#111827 !important; }
.krc-notif-bell svg{ display:block !important;width:19px !important;height:19px !important;flex-shrink:0; }
.krc-notif-badge{
  position:absolute;top:-2px;right:-2px;
  display:flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;
  background:#ef4444;color:#fff;
  font-size:9.5px;font-weight:700;
  border-radius:99px;
  border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  line-height:1;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════
   STATUS KUSTOM MEMBER — "Lagi tidur", "Lagi kuliah" dst — v1.8.0
═══════════════════════════════════════════════════════ */
.krc-my-status-btn{
  display:flex;align-items:center;gap:8px;
  width:calc(100% - 32px);margin:0 16px 10px;
  padding:9px 12px;
  background:#f8f5ee;border:1px solid #ede4d3;border-radius:12px;
  cursor:pointer;font-family:inherit;text-align:left;
  color:#8a7a55;
}
.krc-my-status-btn:hover{ background:#f3edE0; }
.krc-my-status-btn--active{ background:#fef9c3;border-color:#fde68a;color:#854d0e; }
.krc-my-status-btn__icon{ font-size:14px;flex-shrink:0; }
.krc-my-status-btn__text{
  flex:1;min-width:0;font-size:12.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-my-status-btn svg{ flex-shrink:0;opacity:.6; }

/* ── Broadcast ke semua fan — v1.10.0 ── */
.krc-broadcast-btn{
  display:flex;align-items:center;gap:8px;justify-content:center;
  width:calc(100% - 32px);margin:0 16px 12px;
  padding:10px 12px;
  background:#eef2ff;border:1px solid #c7d2fe;border-radius:12px;
  cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
  color:#4338ca;
}
.krc-broadcast-btn:hover{ background:#e0e7ff; }
.krc-broadcast-btn__icon{ font-size:15px; }

.krc-broadcast-modal{
  position:fixed;inset:0;z-index:2001;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .2s;
}
.krc-broadcast-modal--open{ background:rgba(17,24,39,.45);pointer-events:auto; }
.krc-broadcast-modal__box{
  width:100%;max-width:440px;
  background:#fff;border-radius:20px 20px 0 0;
  padding:18px 18px max(18px, env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.32,0,.67,0);
}
.krc-broadcast-modal--open .krc-broadcast-modal__box{
  transform:translateY(0);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
@media (min-width:480px){
  .krc-broadcast-modal{ align-items:center; }
  .krc-broadcast-modal__box{ border-radius:18px; }
}
.krc-broadcast-modal__head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:15px;font-weight:700;color:#111827;
  margin-bottom:6px;
}
.krc-broadcast-modal__close{
  background:none;border:none;cursor:pointer;color:#6b7280;
  padding:4px;display:flex;
}
.krc-broadcast-modal__hint{
  font-size:12px;color:#6b7280;line-height:1.5;margin:0 0 12px;
}
.krc-broadcast-textarea{
  width:100%;min-height:100px;max-height:200px;resize:vertical;
  border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;
  font-family:inherit;font-size:13.5px;color:#111827;
  outline:none;
}
.krc-broadcast-textarea:focus{ border-color:#a5b4fc; }
.krc-broadcast-modal__count{
  text-align:right;font-size:11px;color:#9ca3af;margin:4px 2px 8px;
}
.krc-broadcast-preview{
  display:flex;align-items:center;gap:10px;
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;
  padding:8px;margin-bottom:10px;
}
.krc-broadcast-preview img{
  width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0;
}
.krc-broadcast-preview button{
  margin-left:auto;background:#fee2e2;color:#991b1b;border:none;
  width:26px;height:26px;border-radius:50%;cursor:pointer;flex-shrink:0;
}
.krc-broadcast-modal__actions{ display:flex;align-items:center;gap:8px; }
.krc-broadcast-attach-btn{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  background:#f3f4f6;border:none;cursor:pointer;font-size:17px;
}
.krc-broadcast-attach-btn:hover{ background:#e5e7eb; }
.krc-broadcast-send-btn{
  flex:1;padding:11px;border-radius:12px;border:none;cursor:pointer;
  background:#4338ca;color:#fff;font-weight:700;font-size:13.5px;
  font-family:inherit;
}
.krc-broadcast-send-btn:hover{ background:#3730a3; }
.krc-broadcast-send-btn:disabled{ opacity:.6;cursor:not-allowed; }

.krc-status-modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(17,24,39,.45);
  display:flex;align-items:flex-end;justify-content:center;
}
.krc-status-modal{
  width:100%;max-width:420px;
  background:#fff;border-radius:20px 20px 0 0;
  padding:18px 18px 22px;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
@media (min-width:480px){
  .krc-status-modal-overlay{ align-items:center; }
  .krc-status-modal{ border-radius:18px; }
}
.krc-status-modal__head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:15px;font-weight:700;color:#111827;
  margin-bottom:6px;
}
.krc-status-modal__close{
  background:none;border:none;cursor:pointer;color:#6b7280;
  padding:4px;display:flex;
}
.krc-status-modal__hint{
  font-size:12px;color:#6b7280;line-height:1.5;
  margin:0 0 14px;
}
.krc-status-presets{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;
}
.krc-status-preset{
  font-family:inherit;font-size:12px;font-weight:500;
  padding:7px 11px;border-radius:99px;
  background:#f3f4f6;border:1px solid #e5e7eb;color:#374151;
  cursor:pointer;
}
.krc-status-preset:hover{ background:#e5e7eb; }
.krc-status-input{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:14px;
  padding:11px 13px;border-radius:12px;
  border:1.5px solid #e5e7eb;outline:none;
}
.krc-status-input:focus{ border-color:#a855f7; }
.krc-status-modal__count{
  text-align:right;font-size:11px;color:#9ca3af;margin:4px 2px 14px;
}
.krc-status-modal__actions{
  display:flex;gap:8px;
}
.krc-status-btn{
  flex:1;font-family:inherit;font-size:13.5px;font-weight:600;
  padding:11px;border-radius:12px;border:none;cursor:pointer;
}
.krc-status-btn--clear{ background:#f3f4f6;color:#6b7280; }
.krc-status-btn--clear:hover{ background:#e5e7eb; }
.krc-status-btn--save{ background:#111827;color:#fff; }
.krc-status-btn--save:hover{ background:#000; }
.krc-status-btn:disabled{ opacity:.6;cursor:default; }

/* ═══════════════════════════════════════════════════════
   NOTIFICATION PANEL — v1.4.0
═══════════════════════════════════════════════════════ */
.krc-notif-panel{
  position:absolute;right:12px;top:58px;
  width:320px;max-width:calc(100vw - 24px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  z-index:1000;
  overflow:hidden;
}
.krc-notif-panel__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 10px;
  border-bottom:1px solid #f3f4f6;
  font-size:13px;font-weight:700;color:#111827;
}
.krc-notif-readall{
  background:none;border:none;cursor:pointer;
  font-size:11px;color:#6b7280;font-weight:500;
  padding:0;
  font-family:inherit;
}
.krc-notif-readall:hover{ color:#111827; }
.krc-notif-list{
  max-height:320px;overflow-y:auto;
}
.krc-notif-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 16px;
  text-decoration:none;color:inherit;
  border-bottom:1px solid #f9fafb;
  transition:background .1s;
}
.krc-notif-item:hover{ background:#f9fafb; }
.krc-notif-item--unread{ background:#fdf4ff; }
.krc-notif-item--unread:hover{ background:#f5e8ff; }
.krc-notif-item__icon{
  font-size:18px;flex-shrink:0;margin-top:1px;
}
.krc-notif-item__body{
  flex:1;min-width:0;
}
.krc-notif-item__sender{
  font-size:12px;font-weight:700;color:#111827;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-notif-item__preview{
  font-size:11px;color:#6b7280;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.krc-notif-item__time{
  font-size:10px;color:#9ca3af;flex-shrink:0;margin-top:2px;
}
.krc-notif-empty{
  padding:32px 16px;
  text-align:center;
  font-size:13px;color:#9ca3af;
}
.krc-notif-panel__footer{
  padding:10px 16px;
  border-top:1px solid #f3f4f6;
}
.krc-notif-email-toggle{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:#6b7280;cursor:pointer;
}
.krc-notif-email-toggle input[type=checkbox]{
  width:14px;height:14px;cursor:pointer;
  accent-color:#a855f7;
}

/* ═══════════════════════════════════════════════════════
   SOFT PUSH OPT-IN BANNER — v1.4.0
═══════════════════════════════════════════════════════ */
.krc-push-banner{
  display:flex;align-items:center;gap:12px;
  margin:0 12px 8px;
  padding:12px 14px;
  background:linear-gradient(135deg,#fdf4ff,#f0f9ff);
  border:1px solid #e9d5ff;
  border-radius:14px;
  animation:krc-slide-in .3s ease;
}
@keyframes krc-slide-in{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
.krc-push-banner__icon{
  font-size:22px;flex-shrink:0;
}
.krc-push-banner__text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:1px;
}
.krc-push-banner__text strong{
  font-size:12px;font-weight:700;color:#111827;
}
.krc-push-banner__text span{
  font-size:11px;color:#6b7280;
}
.krc-push-banner__btns{
  display:flex;gap:6px;flex-shrink:0;
}
.krc-push-banner__yes{
  background:linear-gradient(135deg,#a855f7,#ec4899);
  color:#fff;border:none;cursor:pointer;
  font-size:11px;font-weight:700;
  padding:5px 12px;border-radius:99px;
  font-family:inherit;
  white-space:nowrap;
}
.krc-push-banner__no{
  background:none;border:1px solid #d1d5db;cursor:pointer;
  font-size:11px;font-weight:500;color:#6b7280;
  padding:5px 10px;border-radius:99px;
  font-family:inherit;
  white-space:nowrap;
}