/* Sarah GO · Command Center — peraga yang bisa diketuk.
   Semua kelas berawalan cc-. Warna di dalam layar = UI asli aplikasi (hijau GO);
   bingkai ponsel gelap-emas halus supaya menyatu dengan website. */

.cc-akar {
  --cc-go: #0a6b3d;
  --cc-go-2: #0b7a45;
  --cc-hijau: #16a34a;
  --cc-hijau-t: #0a8f4d;
  --cc-merah: #dc2626;
  --cc-bg: #eef2f0;
  --cc-kartu: #ffffff;
  --cc-garis: #e6e9e8;
  --cc-teks: #1c2622;
  --cc-redup: #6b7470;
  --cc-chip: #eef5f1;
  --cc-emas: #d4b26a;
  --cc-wm: #7a5f12;
  --cc-tinggi: 600px;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  font-family: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cc-teks);
  text-align: start;
  -webkit-hyphens: manual;
  hyphens: manual;
  letter-spacing: normal;
  text-transform: none;
}
.cc-akar *, .cc-akar *::before, .cc-akar *::after { box-sizing: border-box; }
.cc-akar span, .cc-akar b, .cc-akar small { -webkit-hyphens: manual; hyphens: manual; }

/* ---------- bingkai ponsel ---------- */
.cc-bingkai {
  padding: 9px;
  border-radius: 38px;
  background: linear-gradient(155deg, #1b2c24 0%, #0a1611 55%, #07110d 100%);
  border: 1px solid rgba(212, 178, 106, .38);
  box-shadow:
    0 28px 60px -24px rgba(0, 0, 0, .75),
    0 0 0 1px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(239, 220, 169, .12);
}
.cc-layar {
  position: relative;
  height: var(--cc-tinggi);
  border-radius: 30px;
  overflow: hidden;
  background: var(--cc-bg);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* ---------- kepala GO ---------- */
.cc-kepala {
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--cc-go-2), var(--cc-go));
  color: #fff;
  padding: 18px 16px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.cc-logo {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--cc-go);
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; flex: 0 0 auto;
}
.cc-judul { font-size: 15.5px; font-weight: 700; line-height: 1.2; min-width: 0; }

.cc-jembatan {
  flex: 0 0 auto;
  background: #e7f4ec;
  border-bottom: 1px solid #cfe6d9;
  padding: 7px 16px;
  font-size: 12.5px;
  color: var(--cc-go);
  display: flex; align-items: center; gap: 8px;
}
.cc-titik {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--cc-hijau);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}
.cc-pita {
  flex: 0 0 auto;
  background: #fbf3dc;
  border-bottom: 1px solid #efe0b3;
  color: var(--cc-wm);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 4px 12px;
  letter-spacing: .2px;
}
.cc-prio {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--cc-redup);
  padding: 9px 16px 2px;
}

/* ---------- aliran percakapan (tinggi tetap, gulir di dalam) ---------- */
.cc-aliran {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: auto;
  padding: 4px 12px 16px;
  scrollbar-width: thin;
}
.cc-aliran:focus-visible { outline: 2px solid var(--cc-go); outline-offset: -3px; border-radius: 0; }

.cc-baris { display: flex; margin: 8px 0; }
.cc-kanan { justify-content: flex-end; }
.cc-gelembung {
  max-width: 88%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  overflow-wrap: anywhere;
  animation: cc-masuk .18s ease-out;
}
.cc-kiri .cc-gelembung {
  background: var(--cc-kartu);
  border: 1px solid var(--cc-garis);
  border-start-start-radius: 4px;
}
.cc-kanan .cc-gelembung {
  background: #d7f2df;
  border-start-end-radius: 4px;
}
.cc-nama { font-weight: 800; color: var(--cc-go); font-size: 12px; margin-bottom: 3px; }
.cc-gelembung b { font-weight: 800; }
.cc-ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.cc-akar code.cc-ltr { white-space: normal; }
.cc-kode { font-family: inherit; font-size: inherit; background: none; padding: 0; color: inherit; overflow-wrap: anywhere; }

@keyframes cc-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* mengetik */
.cc-ketik { display: inline-flex; align-items: center; gap: 8px; color: var(--cc-redup); font-size: 12.5px; padding: 9px 12px; }
.cc-titik3 { display: inline-flex; gap: 3px; }
.cc-titik3 i {
  width: 6px; height: 6px; border-radius: 50%; background: #9aa6a0; display: block;
  animation: cc-lompat 1s infinite ease-in-out;
}
.cc-titik3 i:nth-child(2) { animation-delay: .15s; }
.cc-titik3 i:nth-child(3) { animation-delay: .3s; }
@keyframes cc-lompat { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---------- tombol / chip ---------- */
.cc-akar button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.25;
}
.cc-akar button:focus-visible { outline: 3px solid #0b5bd3; outline-offset: 2px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cc-chip {
  border: 1.5px solid var(--cc-go);
  background: var(--cc-chip);
  color: var(--cc-go);
  border-radius: 22px;
  padding: 8px 14px;
  min-height: 38px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .12s, color .12s, opacity .12s;
}
.cc-chip:hover:not(:disabled) { background: var(--cc-go); color: #fff; }
.cc-chip.cc-abu { border-color: #c4cbc7; background: #f4f6f5; color: #4b544f; }
.cc-chip.cc-abu:hover:not(:disabled) { background: #4b544f; color: #fff; }
.cc-chip.cc-buy { border-color: var(--cc-hijau); color: var(--cc-hijau-t); min-width: 76px; }
.cc-chip.cc-buy:hover:not(:disabled) { background: var(--cc-hijau); color: #fff; }
.cc-chip.cc-sell { border-color: var(--cc-merah); color: var(--cc-merah); min-width: 76px; }
.cc-chip.cc-sell:hover:not(:disabled) { background: var(--cc-merah); color: #fff; }
.cc-chip:disabled { cursor: default; opacity: .45; }
.cc-chip.cc-dipilih:disabled { opacity: 1; background: var(--cc-go); border-color: var(--cc-go); color: #fff; }
.cc-chip.cc-buy.cc-dipilih:disabled { background: var(--cc-hijau); border-color: var(--cc-hijau); }
.cc-chip.cc-sell.cc-dipilih:disabled { background: var(--cc-merah); border-color: var(--cc-merah); }

.cc-wm { font-size: 11.5px; color: var(--cc-wm); margin-top: 8px; line-height: 1.45; }
.cc-wm b { color: #5e4a0f; }

/* ---------- ringkasan ---------- */
.cc-ringkas { margin-top: 7px; background: #f7faf8; border: 1px solid #d9e7e0; border-radius: 12px; padding: 6px 12px; }
.cc-rb { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px dashed #e2ece7; }
.cc-rb:last-child { border-bottom: 0; }
.cc-rk { color: var(--cc-redup); flex: 0 1 auto; }
.cc-rv { font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.cc-v-buy { color: var(--cc-hijau-t); }
.cc-v-sell { color: var(--cc-merah); }

.cc-trail {
  margin-top: 10px;
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  background: #fff;
  border: 1px solid var(--cc-garis);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: start;
  color: var(--cc-teks);
  cursor: pointer;
}
.cc-trail:disabled { cursor: default; opacity: .6; }
.cc-sw {
  width: 44px; height: 26px; border-radius: 20px; flex: 0 0 auto;
  background: #cbd3ce; position: relative; transition: background-color .15s;
}
.cc-sw::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: inset-inline-start .15s;
}
.cc-trail.cc-on .cc-sw { background: var(--cc-hijau); }
.cc-trail.cc-on .cc-sw::after { inset-inline-start: 21px; }
.cc-trail-tx { font-size: 13px; line-height: 1.4; min-width: 0; }
.cc-trail-tx b { display: block; font-size: 13.5px; }
.cc-trail-tx small { display: block; color: var(--cc-redup); font-size: 12px; }

.cc-cmd {
  margin-top: 10px;
  background: #101614;
  color: #8ef0b6;
  border-radius: 10px;
  padding: 9px 12px;
}
.cc-cmd-lbl { display: block; color: #7c8e85; font-size: 10.5px; letter-spacing: .4px; margin-bottom: 3px; font-family: var(--mono, ui-monospace, Consolas, monospace); }
.cc-cmd code { display: block; font-family: var(--mono, ui-monospace, "SFMono-Regular", Consolas, monospace); font-size: 13.5px; color: #8ef0b6; background: none; padding: 0; text-align: left; word-break: normal; overflow-wrap: anywhere; }

.cc-aksi { display: flex; gap: 8px; margin-top: 11px; }
.cc-chip.cc-go {
  flex: 1 1 auto;
  border: 0; border-radius: 12px;
  background: var(--cc-hijau); color: #fff;
  padding: 13px 10px; font-size: 15px; font-weight: 800; letter-spacing: 1px;
}
.cc-chip.cc-go:hover:not(:disabled) { background: #12893f; }
.cc-chip.cc-batal {
  flex: 0 0 auto;
  border: 0; border-radius: 12px;
  background: #eef0ef; color: #4f5a56;
  padding: 13px 16px;
}
.cc-chip.cc-batal:hover:not(:disabled) { background: #dfe3e1; color: #2d3532; }
.cc-chip.cc-go:disabled, .cc-chip.cc-batal:disabled { opacity: .5; }
.cc-chip.cc-go.cc-dipilih:disabled { opacity: 1; background: #12893f; color: #fff; }
.cc-chip.cc-batal.cc-dipilih:disabled { opacity: 1; background: #4f5a56; color: #fff; }
.cc-catatan { font-size: 11.5px; color: var(--cc-redup); margin-top: 8px; line-height: 1.5; }

/* ---------- mengirim ---------- */
.cc-tunggu { display: flex; align-items: center; gap: 9px; color: var(--cc-redup); font-size: 13.5px; }
.cc-spin {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 2px solid #cfe0d8; border-top-color: var(--cc-go); border-radius: 50%;
  animation: cc-putar .7s linear infinite;
}
@keyframes cc-putar { to { transform: rotate(360deg); } }

/* ---------- kartu POSISI TERBUKA ---------- */
.cc-terbuka { margin-top: 4px; border: 1px solid #cfe6d9; border-radius: 14px; overflow: hidden; }
.cc-tb-kepala { background: #e7f4ec; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--cc-go); font-size: 13px; }
.cc-ok { width: 20px; height: 20px; border-radius: 50%; background: var(--cc-hijau); color: #fff; display: grid; place-items: center; font-size: 12px; flex: 0 0 auto; }
.cc-tb-badan { padding: 10px 12px; background: #fff; }
.cc-tb-judul { font-size: 15.5px; font-weight: 800; margin-bottom: 2px; line-height: 1.3; }
.cc-tiket { font-size: 11.5px; color: var(--cc-redup); margin-bottom: 9px; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e8eeeb; border: 1px solid #e8eeeb; border-radius: 10px; overflow: hidden; }
.cc-sel { background: #fff; padding: 7px 10px; min-width: 0; }
.cc-sk { font-size: 11px; color: var(--cc-redup); }
.cc-sv { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-sv.cc-v-sl { color: var(--cc-merah); }
.cc-sv.cc-v-tp { color: var(--cc-hijau-t); }
.cc-jaga { margin-top: 9px; font-size: 12.5px; color: var(--cc-go); background: #f2faf6; border-radius: 9px; padding: 8px 10px; line-height: 1.5; }

/* ---------- notifikasi (di dalam layar) ---------- */
.cc-push {
  position: absolute; z-index: 3;
  top: 8px; inset-inline: 10px;
  background: #1c2622; color: #fff;
  border-radius: 14px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transform: translateY(-130%);
  opacity: 0;
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .25s, visibility 0s linear .35s;
  pointer-events: none;
}
.cc-push.cc-tampil { transform: none; opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .25s, visibility 0s; }
.cc-push-ikon { width: 32px; height: 32px; border-radius: 9px; background: var(--cc-go); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.cc-push-teks { font-size: 12px; line-height: 1.35; min-width: 0; }
.cc-push-teks b { display: block; font-size: 12.5px; }
.cc-push-teks small { opacity: .75; font-size: inherit; }

/* ---------- bar bawah ---------- */
.cc-bar {
  flex: 0 0 auto;
  background: #fff;
  border-top: 1px solid var(--cc-garis);
  padding: 9px 12px 14px;
  display: flex; gap: 7px; align-items: center;
}
.cc-mini {
  flex: 0 0 auto;
  border: 1.5px solid var(--cc-go);
  background: var(--cc-chip);
  color: var(--cc-go);
  border-radius: 20px;
  padding: 7px 12px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cc-mini:hover { background: var(--cc-go); color: #fff; }
.cc-ket {
  flex: 1 1 0; min-width: 0;
  font-size: 10.5px; color: var(--cc-redup);
  text-align: end; line-height: 1.3;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-overflow: ellipsis; overflow-wrap: anywhere;
}

@media (max-width: 359px) {
  .cc-bingkai { padding: 6px; border-radius: 30px; }
  .cc-layar { border-radius: 25px; }
  .cc-ket { display: none; }
  .cc-aliran { padding-inline: 9px; }
  .cc-gelembung { max-width: 92%; }
  .cc-sel { padding: 7px 8px; }
  .cc-sv { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-akar *, .cc-akar *::before, .cc-akar *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}