.cr-wrap{width:min(920px,calc(100% - 28px));margin:110px auto 60px}.cr-head{padding:24px;border:1px solid #1d4ed844;border-radius:22px;background:linear-gradient(135deg,#071b34,#0b2d50);color:#fff;display:flex;justify-content:space-between;gap:20px}.cr-head span{font-size:11px;letter-spacing:.16em;color:#7dd3fc}.cr-head h1{margin:5px 0;font-size:30px}.cr-head p{margin:0;max-width:650px;color:#dbeafe}.cr-state{height:max-content;padding:7px 11px;border-radius:999px;font-size:11px;background:#16a34a}.cr-state.read_only{background:#d97706}.cr-list{display:grid;gap:12px;margin:18px 0}.cr-msg{padding:16px 18px;border:1px solid #dbe4ef;border-radius:17px;background:#fff;box-shadow:0 5px 18px #0f172a0d}.cr-msg.admin{border:2px solid #2563eb;background:linear-gradient(135deg,#eff6ff,#fff)}.cr-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cr-meta strong{color:#0f172a}.cr-msg.admin .cr-meta strong{color:#1d4ed8;font-size:16px}.cr-meta em{font-style:normal;font-size:9px;padding:3px 6px;border-radius:99px;background:#e2e8f0;color:#475569}.cr-msg.admin .cr-meta em{background:#2563eb;color:#fff}.cr-msg.simulation .cr-meta em{background:#f1f5f9}.cr-meta time{margin-left:auto;font-size:11px;color:#64748b}.cr-msg p{margin:9px 0 4px;color:#334155;white-space:pre-wrap;overflow-wrap:anywhere}.cr-reply{font-size:12px;padding:8px 10px;border-left:3px solid #94a3b8;background:#f8fafc;margin-bottom:9px;color:#64748b}.cr-reply-btn{border:0;background:none;color:#2563eb;padding:4px 0;cursor:pointer}.cr-compose{position:sticky;bottom:10px;padding:12px;border:1px solid #dbe4ef;border-radius:18px;background:#ffffffed;backdrop-filter:blur(10px)}.cr-compose textarea{width:100%;min-height:80px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:12px;padding:12px;resize:vertical}.cr-compose form>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.cr-compose button,.cr-login{border:0;border-radius:11px;padding:10px 18px;background:#2563eb;color:#fff;text-decoration:none}.cr-login{display:block;text-align:center}.cr-ok,.cr-err{margin:14px 0;padding:11px 14px;border-radius:12px}.cr-ok{background:#dcfce7}.cr-err{background:#fee2e2}.cr-modal[hidden]{display:none}.cr-modal{position:fixed;inset:0;z-index:20000;background:#020617aa;display:grid;place-items:center;padding:20px}.cr-modal>div{width:min(420px,100%);background:#fff;border-radius:18px;padding:22px}.cr-modal h3{margin-top:0}.cr-modal button{border:0;border-radius:10px;background:#2563eb;color:#fff;padding:10px 16px}.cr-replying{font-size:12px;color:#2563eb;margin-bottom:7px}@media(max-width:600px){.cr-wrap{width:calc(100% - 18px);margin-top:88px}.cr-head{padding:18px;display:block}.cr-state{display:inline-block;margin-top:14px}.cr-msg{padding:14px}.cr-meta time{width:100%;margin-left:0}.cr-compose{bottom:6px}}
/* V2: status pesan pribadi member */
.cr-msg.cr-own-private{border-style:dashed;border-color:#f59e0b;background:linear-gradient(135deg,#fffbeb,#fff)}
.cr-status.pending{background:#f59e0b!important;color:#fff!important}.cr-status.rejected{background:#dc2626!important;color:#fff!important}
.cr-private-note{display:block;margin-top:7px;color:#92400e;font-size:11px;line-height:1.45}
.cr-msg.simulation .cr-meta em{background:#64748b;color:#fff}

/* V4: thread komentar bergaya diskusi — balasan tersusun tepat di bawah pesan utama. */
.cr-thread{display:grid;gap:0}
.cr-thread-replies{margin:0 0 0 34px;padding:8px 0 0 18px;border-left:2px solid #dbe4ef;display:grid;gap:8px}
.cr-thread-replies .cr-msg{border-radius:14px;box-shadow:none;padding:13px 15px}
.cr-thread-replies .cr-msg.admin{border-width:1px;border-color:#93c5fd;background:linear-gradient(135deg,#eff6ff,#fff)}
.cr-replying{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:#eff6ff}
.cr-replying[hidden]{display:none}
.cr-replying button{padding:4px 8px!important;border-radius:7px!important;background:#e2e8f0!important;color:#334155!important;font-size:11px}
/* Pending milik pengirim sengaja identik dengan pesan publik: status moderasi tidak ditampilkan di UI member. */
.cr-msg.cr-own-private{border-style:solid;border-color:#dbe4ef;background:#fff}
.cr-status,.cr-private-note{display:none!important}
@media(max-width:600px){.cr-thread-replies{margin-left:16px;padding-left:10px}.cr-thread-replies .cr-msg{padding:12px}}

/* V5: direct threaded replies. Every reply is placed under the exact message it answers. */
.cr-thread .cr-thread{margin-top:8px}
.cr-thread-replies{margin:8px 0 0 28px;padding:0 0 0 14px;border-left:2px solid #dbe4ef;display:grid;gap:8px}
.cr-thread-replies .cr-thread-replies{margin-left:18px;padding-left:12px}
.cr-reply-context{display:inline-block;margin-top:8px;padding:4px 8px;border-radius:7px;background:#f1f5f9;color:#64748b;font-size:11px}
.cr-thread-replies .cr-msg{box-shadow:none}
@media(max-width:600px){.cr-thread-replies,.cr-thread-replies .cr-thread-replies{margin-left:10px;padding-left:8px}.cr-reply-context{font-size:10px}}

/* V6: pagination thread. Pagination dihitung per percakapan utama agar reply tidak terpotong. */
.cr-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px 0 6px}
.cr-page-numbers{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.cr-page{min-width:38px;height:38px;padding:0 12px;border:1px solid #dbe4ef;border-radius:10px;background:#fff;color:#334155;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:.18s ease}
a.cr-page:hover{border-color:#2563eb;color:#2563eb;transform:translateY(-1px)}
.cr-page.cr-current{background:#2563eb;border-color:#2563eb;color:#fff}
.cr-page.cr-disabled{opacity:.45;cursor:not-allowed}
.cr-dots{color:#64748b;padding:0 2px}
.cr-page-info{text-align:center;color:#64748b;font-size:12px;margin:0 0 18px}
@media(max-width:600px){.cr-pagination{gap:6px}.cr-page{height:36px;min-width:36px;padding:0 9px;font-size:12px}.cr-page-numbers{order:3;width:100%}.cr-page-info{font-size:11px}}

/* V10: shared Codeasea light/dark appearance + clearer root/reply/admin identity. */
.cr-wrap{
  --cr-page:var(--member-page-bg,#f4f8f6);
  --cr-card:var(--member-card-bg,#ffffff);
  --cr-input:var(--member-input-bg,#ffffff);
  --cr-text:var(--member-text,#173b31);
  --cr-muted:var(--member-muted,#6b827a);
  --cr-border:var(--member-border,#d8e7e2);
  --cr-primary:var(--member-primary,#2563eb);
  --cr-primary-rgb:var(--member-primary-rgb,37,99,235);
  --cr-root-bg:color-mix(in srgb,var(--cr-card) 88%,var(--cr-primary) 12%);
  --cr-reply-bg:color-mix(in srgb,var(--cr-card) 95%,var(--cr-muted) 5%);
  --cr-reply-line:color-mix(in srgb,var(--cr-border) 68%,var(--cr-primary) 32%);
  --cr-admin:#2563eb;
  --cr-admin-bg:color-mix(in srgb,var(--cr-card) 82%,#2563eb 18%);
}
.cr-list,.cr-thread{color:var(--cr-text)}
.cr-msg,.cr-msg.cr-own-private{
  color:var(--cr-text);
  border-color:var(--cr-border);
  background:var(--cr-card);
  box-shadow:0 5px 18px rgba(15,23,42,.07);
}
/* Pesan utama dan reply sengaja berbeda agar struktur percakapan langsung terbaca. */
.cr-msg.cr-is-root:not(.admin){
  background:var(--cr-root-bg);
  border-color:color-mix(in srgb,var(--cr-border) 55%,var(--cr-primary) 45%);
  box-shadow:0 8px 24px rgba(var(--cr-primary-rgb),.08);
}
.cr-msg.cr-is-reply:not(.admin){
  background:var(--cr-reply-bg);
  border-color:var(--cr-border);
  box-shadow:none;
}
.cr-thread-replies{
  border-left-color:var(--cr-reply-line);
}
.cr-meta strong,.cr-msg p{color:var(--cr-text)}
.cr-meta time,.cr-reply-context,.cr-page-info,.cr-dots{color:var(--cr-muted)}
/* Pelanggan dan Akun Demo menggunakan identitas warna yang sama; hanya teks badge berbeda. */
.cr-msg.member .cr-meta em,
.cr-msg.simulation .cr-meta em{
  background:color-mix(in srgb,var(--cr-primary) 14%,var(--cr-card));
  color:var(--cr-primary);
  border:1px solid color-mix(in srgb,var(--cr-primary) 28%,var(--cr-border));
}
/* Admin Resmi tetap paling kontras dan tidak dapat tertukar dengan pelanggan. */
.cr-msg.admin,
.cr-thread-replies .cr-msg.admin{
  border:2px solid var(--cr-admin);
  background:var(--cr-admin-bg);
  box-shadow:0 8px 24px rgba(37,99,235,.12);
}
.cr-msg.admin .cr-meta strong{color:var(--cr-admin)}
.cr-msg.admin .cr-meta em{
  background:var(--cr-admin);
  border:1px solid var(--cr-admin);
  color:#fff;
}
.cr-reply-context{
  background:color-mix(in srgb,var(--cr-card) 82%,var(--cr-primary) 18%);
}
.cr-reply-btn{color:var(--cr-primary)}
.cr-compose{
  border-color:var(--cr-border);
  background:color-mix(in srgb,var(--cr-card) 92%,transparent);
  color:var(--cr-text);
}
.cr-compose textarea{
  color:var(--cr-text);
  border-color:var(--cr-border);
  background:var(--cr-input);
}
.cr-compose textarea::placeholder{color:var(--cr-muted)}
.cr-compose small{color:var(--cr-muted)}
.cr-compose button,.cr-login,.cr-modal button,.cr-page.cr-current{
  background:var(--cr-primary);
  color:var(--member-on-primary,#fff);
}
.cr-replying{
  color:var(--cr-primary);
  background:color-mix(in srgb,var(--cr-card) 82%,var(--cr-primary) 18%);
}
.cr-replying button{
  background:var(--cr-card)!important;
  color:var(--cr-text)!important;
  border:1px solid var(--cr-border)!important;
}
.cr-page{
  border-color:var(--cr-border);
  background:var(--cr-card);
  color:var(--cr-text);
}
a.cr-page:hover{border-color:var(--cr-primary);color:var(--cr-primary)}
.cr-modal>div{background:var(--cr-card);color:var(--cr-text);border:1px solid var(--cr-border)}
.cr-ok{background:color-mix(in srgb,var(--cr-card) 76%,#22c55e 24%);color:var(--cr-text)}
.cr-err{background:color-mix(in srgb,var(--cr-card) 76%,#ef4444 24%);color:var(--cr-text)}
.cr-empty{color:var(--cr-muted)}

/* appearance.js menetapkan data-member-theme pada <html>; Chat Room mengikuti sistem global yang sama. */
html[data-member-theme="dark"] .cr-wrap{
  --cr-root-bg:color-mix(in srgb,var(--cr-card) 84%,var(--cr-primary) 16%);
  --cr-reply-bg:color-mix(in srgb,var(--cr-card) 92%,#ffffff 8%);
  --cr-reply-line:color-mix(in srgb,var(--cr-border) 58%,var(--cr-primary) 42%);
  --cr-admin-bg:color-mix(in srgb,var(--cr-card) 76%,#2563eb 24%);
}
html[data-member-theme="dark"] .cr-msg,
html[data-member-theme="dark"] .cr-msg.cr-own-private{box-shadow:0 7px 22px rgba(0,0,0,.18)}
html[data-member-theme="dark"] .cr-msg.cr-is-reply:not(.admin){box-shadow:none}
html[data-member-theme="dark"] .cr-compose{box-shadow:0 10px 30px rgba(0,0,0,.18)}

/* V11: richer conversation palette — root member green, replies white/turquoise, official admin blue. */
.cr-wrap{
  --cr-member-root-bg:#e8f7ef;
  --cr-member-root-border:#8fd7b1;
  --cr-member-reply-bg:#f4fffd;
  --cr-member-reply-border:#83d9d0;
  --cr-member-reply-line:#49bfb3;
  --cr-official-bg:#eaf3ff;
  --cr-official-border:#3b82f6;
  --cr-official-name:#2563eb;
}
.cr-msg.cr-is-root:not(.admin){
  background:var(--cr-member-root-bg);
  border-color:var(--cr-member-root-border);
  box-shadow:0 8px 24px rgba(34,197,94,.08);
}
.cr-msg.cr-is-reply:not(.admin){
  background:var(--cr-member-reply-bg);
  border-color:var(--cr-member-reply-border);
  box-shadow:none;
}
.cr-thread-replies{border-left-color:var(--cr-member-reply-line)}
.cr-msg.admin,
.cr-thread-replies .cr-msg.admin{
  background:var(--cr-official-bg);
  border-color:var(--cr-official-border);
  box-shadow:0 8px 24px rgba(37,99,235,.13);
}
.cr-msg.admin .cr-meta strong{color:var(--cr-official-name)}
.cr-msg.admin .cr-meta em{background:#2563eb;border-color:#2563eb;color:#fff}

html[data-member-theme="dark"] .cr-wrap{
  --cr-member-root-bg:#123b30;
  --cr-member-root-border:#277a61;
  --cr-member-reply-bg:#173f42;
  --cr-member-reply-border:#2d8e8b;
  --cr-member-reply-line:#38b2ac;
  --cr-official-bg:#102f57;
  --cr-official-border:#3b82f6;
  --cr-official-name:#facc15;
}
html[data-member-theme="dark"] .cr-msg.cr-is-root:not(.admin){box-shadow:0 8px 24px rgba(16,185,129,.09)}
html[data-member-theme="dark"] .cr-msg.cr-is-reply:not(.admin){box-shadow:none}
html[data-member-theme="dark"] .cr-msg.admin,
html[data-member-theme="dark"] .cr-thread-replies .cr-msg.admin{box-shadow:0 8px 24px rgba(37,99,235,.16)}

/* V12: softer member palette + stronger official-admin separation in light mode. */
.cr-wrap{
  /* Light: member is a quiet teal, reply is soft mint-white. */
  --cr-member-root-bg:#e7f5f1;
  --cr-member-root-border:#9bcfc2;
  --cr-member-reply-bg:#f7fcfa;
  --cr-member-reply-border:#c4e3da;
  --cr-member-reply-line:#79bdb0;
  /* Official admin intentionally uses a clearer blue identity. */
  --cr-official-bg:#dcecff;
  --cr-official-border:#2563eb;
  --cr-official-name:#1d4ed8;
}
.cr-msg.cr-is-root:not(.admin){box-shadow:0 7px 22px rgba(13,148,136,.055)}
.cr-msg.cr-is-reply:not(.admin){box-shadow:0 4px 14px rgba(15,118,110,.035)}
.cr-msg.admin,
.cr-thread-replies .cr-msg.admin{border-width:2px;box-shadow:0 8px 24px rgba(37,99,235,.16)}

html[data-member-theme="dark"] .cr-wrap{
  /* Dark: subdued teal rather than saturated green. */
  --cr-member-root-bg:#153632;
  --cr-member-root-border:#356f66;
  /* Reply stays lighter than the root, with a gentle green/teal cast. */
  --cr-member-reply-bg:#203d3a;
  --cr-member-reply-border:#47736c;
  --cr-member-reply-line:#4f8f85;
  /* Keep the already-approved official admin identity. */
  --cr-official-bg:#102f57;
  --cr-official-border:#3b82f6;
  --cr-official-name:#facc15;
}
html[data-member-theme="dark"] .cr-msg.cr-is-root:not(.admin){box-shadow:0 7px 22px rgba(45,212,191,.045)}
html[data-member-theme="dark"] .cr-msg.cr-is-reply:not(.admin){box-shadow:none}

/* V13: official admin love reaction */
.cr-admin-love{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 9px;border-radius:999px;background:rgba(225,29,72,.10);border:1px solid rgba(225,29,72,.28);color:#e11d48;font-size:11px;font-weight:800;line-height:1}.cr-admin-love span{font-size:15px;line-height:1}@media(max-width:600px){.cr-admin-love{font-size:10px;padding:5px 8px}}

/* V13.1: admin love visibility in dark theme */
html[data-member-theme="dark"] .cr-admin-love{color:#facc15;border-color:rgba(250,204,21,.32);background:rgba(250,204,21,.08)}


/* V13.4: lightweight warning icons in Chat Room hero (inline SVG, no external asset/request). */
.cr-warning-line{display:flex;align-items:center;gap:12px;margin-top:5px}.cr-warning-line p{margin:0}.cr-warning-icons{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}.cr-warning-icons svg{width:21px;height:21px;fill:none;stroke:#facc15;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cr-warning-icons svg:nth-child(2){stroke:#fb923c}.cr-warning-icons svg:nth-child(3){stroke:#7dd3fc}@media(max-width:600px){.cr-warning-line{align-items:flex-start;gap:9px}.cr-warning-icons{padding-top:2px}.cr-warning-icons svg{width:18px;height:18px}}

/* V13.5: hero attention icons live in the top-right corner without disturbing hero copy. */
.cr-head{position:relative}
.cr-warning-line{display:block;margin-top:5px;padding-right:0}
.cr-warning-icons{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(2,6,23,.22);backdrop-filter:blur(4px);z-index:1}
.cr-warning-line p{margin:0}
.cr-warning-icons svg{width:20px;height:20px}
@media(max-width:600px){.cr-head{padding-top:58px}.cr-warning-line{display:block}.cr-warning-icons{top:14px;right:14px;padding:6px 8px}.cr-warning-icons svg{width:18px;height:18px}}


/* V13.7: definitive responsive hero warning icon layout. */
.cr-head {
  position: relative;
}
.cr-head .cr-kicker {
  display: block;
  max-width: calc(100% - 205px);
  padding-top: 7px;
  min-height: 54px;
  overflow-wrap: anywhere;
}
.cr-warning-icons {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(2,6,23,.22);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.cr-warning-icons svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cr-warning-icons svg:nth-child(1) { stroke: #facc15 !important; }
.cr-warning-icons svg:nth-child(2) { stroke: #fb923c !important; }
.cr-warning-icons svg:nth-child(3) { stroke: #7dd3fc !important; }

@media (max-width: 600px) {
  .cr-head {
    padding-top: 0;
  }
  .cr-head .cr-kicker {
    max-width: calc(100% - 170px);
    min-height: 52px;
    padding-top: 8px;
    padding-right: 6px;
  }
  .cr-warning-icons {
    top: 14px;
    right: 14px;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 14px;
  }
  .cr-warning-icons svg {
    width: 27px;
    height: 27px;
  }
  .cr-head h1 {
    margin-top: 8px;
  }
}

@media (max-width: 390px) {
  .cr-head .cr-kicker {
    max-width: calc(100% - 154px);
    min-height: 50px;
  }
  .cr-warning-icons {
    gap: 6px;
    padding: 8px 9px;
  }
  .cr-warning-icons svg {
    width: 25px;
    height: 25px;
  }
}

/* V13.9: keep the chat status badge away from the warning icons.
   The green area seen behind the desktop icons was the Chat Aktif badge, not an SVG glow. */
@media (min-width: 601px) {
  .cr-head > .cr-state {
    position: absolute;
    right: 22px;
    bottom: 18px;
    margin: 0;
    z-index: 1;
    box-shadow: none !important;
    filter: none !important;
  }
  .cr-warning-icons {
    z-index: 3;
    box-shadow: none !important;
    filter: none !important;
    isolation: isolate;
  }
  .cr-warning-icons,
  .cr-warning-icons svg,
  .cr-warning-icons svg * {
    filter: none !important;
    text-shadow: none !important;
  }
}