/* planet-chat.css — the conversation over the planet visual (HOME_VISUAL=planet), in the senja look of
   .design-home-ux/flow.html (#chat, #build, #ready, #masuk): the same tokens, radii and type as the landing.
   It restyles the REAL components app.js draws (messages, the Ringkasan rencana card, build progress, READY, publish,
   sign-in); nothing here adds behaviour. */

/* ---------- senja tokens for the conversation's components (style.css reads these names) ---------- */
.thread, .auth-panel, .notice, .plan-row, #pending, #cmd {
  --ink: #f1f7fb; --soft: #b6c9d6; --dim: #93aabb; --muted: #b6c9d6; --muted-2: #93aabb;
  --line: rgba(186, 230, 253, .14); --line-2: rgba(186, 230, 253, .26); --h-line: rgba(186, 230, 253, .14); --h-line-2: rgba(186, 230, 253, .26);
  --h-glass: rgba(18, 40, 60, .72); --h-glass-2: rgba(18, 40, 60, .55); --h-glass-3: rgba(8, 22, 36, .55);
  --h-blue: #22d3ee; --h-blue-2: #3b82f6; --h-blue-b: #67e8f9; --h-blue-t: rgba(34, 211, 238, .14); --h-blue-l: rgba(34, 211, 238, .35);
  --ok: #4ade80; --ok-t: rgba(74, 222, 128, .14); --warn: #fcd34d; --warn-t: rgba(251, 191, 36, .16); --bad: #ffb4a1; --bad-t: rgba(255, 143, 115, .14);
  --cyan-ink: #22d3ee; --night: #0b1530; --edge: rgba(34, 211, 238, .35); --glow: rgba(34, 211, 238, .14);
  --shadow: 0 30px 70px -32px rgba(2, 10, 20, .75); --r: 26px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink); text-align: left; font-family: var(--font);
}
.c-pub { background: rgba(74, 222, 128, .14); color: #86efac; border: 1px solid rgba(74, 222, 128, .3); }
.nav { position: relative; z-index: 8; } /* above the hero block, which the design lifts by -6vh over the nav */

/* ---------- messages (flow #chat) ---------- */
#thread { gap: 16px; }
#thread .msg { max-width: min(640px, 92%); font-size: 15px; line-height: 1.6; }
#thread .msg.user { align-self: flex-end; color: var(--ink); border-radius: 20px 20px 6px 20px; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .24), rgba(59, 130, 246, .22)); border: 1px solid var(--edge); box-shadow: none; }
#thread .msg.jot { align-self: flex-start; color: var(--ink); border-radius: 20px 20px 20px 6px; padding: 14px 18px 16px;
  background: var(--h-glass); border: 1px solid rgba(186, 230, 253, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; }
#thread .msg.jot::before { color: var(--cyan-ink); font-family: 'Bricolage Grotesque', var(--font); letter-spacing: .02em; }
#thread .typing { color: var(--soft); }

/* ---------- cards: the plan summary, build progress, READY, publish (flow .plan / .build-card / .ready) ---------- */
#thread .card { position: relative; background: var(--h-glass); color: var(--ink); border: 1px solid rgba(186, 230, 253, .18); border-radius: 26px; padding: 22px 24px;
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .10), 0 0 0 1px var(--edge), 0 0 26px var(--glow), 0 20px 50px -28px rgba(0, 0, 0, .6); overflow: visible; }
#thread .card::before, #thread .card::after { display: none; }
#thread .card h3 { font-family: 'Bricolage Grotesque', var(--font); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
#thread .card .sub, #thread .card p, #thread .card .detail, #thread .card .note { color: var(--soft); }
#thread .card .group { color: var(--cyan-ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
#thread .card .ok-line { color: var(--ok); } #thread .card .warn-line { color: var(--warn); } #thread .card .bad-line { color: var(--bad); }
#thread .card strong { color: var(--ink); }
#thread .card.plan { box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .10), 0 0 0 1px var(--edge), 0 0 40px rgba(34, 211, 238, .22), 0 20px 50px -28px rgba(0, 0, 0, .6); }
#thread .points .tag, #thread .tag { background: rgba(147, 197, 253, .14); color: #bfdbfe; border: 1px solid rgba(147, 197, 253, .3); }
#thread .points .tag.yours { background: rgba(167, 139, 250, .16); color: #ddd6fe; border-color: rgba(167, 139, 250, .34); }
#thread .tag.truth.demo, #thread .badge { background: rgba(251, 191, 36, .16); color: #fcd34d; border: 1px solid rgba(251, 191, 36, .3); }
#thread .tag.truth.aktual { background: rgba(34, 211, 238, .14); color: #67e8f9; border: 1px solid rgba(34, 211, 238, .3); }
#thread .card details summary { color: var(--soft); }
#thread .card select, #thread .card input { background: rgba(8, 22, 36, .55); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; }

/* buttons: Bangun = the senja primary (cyan to blue, dark label), Ubah and the rest = outline */
#thread .btn, .auth-panel .btn { min-height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink);
  background: rgba(18, 40, 60, .55); border: 1px solid var(--line-2); box-shadow: none; }
#thread .btn:hover, .auth-panel .btn:hover { background: rgba(18, 40, 60, .8); border-color: var(--edge); }
#thread .btn.primary, .auth-panel .btn.primary, #thread a.btn.primary { color: #06202b; background: linear-gradient(135deg, #22d3ee, #3b82f6); border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(34, 211, 238, .6), inset 0 1px 0 rgba(255, 255, 255, .4); }
#thread a.btn { color: var(--ink); text-decoration: none; }
#thread a.btn.primary { color: #06202b; }
#thread .btn:disabled { opacity: .45; }

/* build progress (flow .checks / .prog) */
#thread .steps li { color: var(--dim); }
#thread .steps li::before { content: ""; width: 20px; height: 20px; border-radius: 99px; border: 1.5px solid var(--line-2); box-sizing: border-box; }
#thread .steps li.active { color: var(--ink); } #thread .steps li.active::before { border-color: #22d3ee; border-top-color: transparent; animation: turn .8s linear infinite; text-shadow: none; }
#thread .steps li.done { color: var(--ink); } #thread .steps li.done::before { content: "✓"; display: grid; place-items: center; font-size: 12px; color: #06202b; background: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, .6); }
#thread .stat { background: rgba(186, 230, 253, .05); border: 1px solid var(--line); border-radius: 14px; }
#thread .stat b { font-family: 'Bricolage Grotesque', var(--font); color: var(--ink); }
#thread .stat span { color: var(--soft); }

/* ---------- the command bar while talking (flow .pill) ---------- */
#cmd .pending, #cmd .link-row { padding: 6px 10px 2px; }
#cmd .link-row { display: flex; gap: 6px; align-items: center; }
#cmd .link-row[hidden], #cmd .pending[hidden] { display: none; }
#cmd .link-row input { flex: 1; min-width: 0; border: 1px solid var(--line-2); background: rgba(8, 22, 36, .55); color: var(--ink); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; }
#cmd .mini { border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; background: linear-gradient(135deg, #22d3ee, #3b82f6); color: #06202b; }
#cmd .mini.ghost { background: rgba(18, 40, 60, .55); color: var(--soft); box-shadow: 0 0 0 1px var(--line-2); }
#cmd .chip-file { color: var(--ink); background: rgba(8, 22, 36, .55); border-color: var(--line-2); }
#send:disabled { opacity: .55; cursor: default; }
.limits { color: #93aabb; font-size: 13px; margin: 12px 0 0; text-align: center; }
.notice { background: rgba(251, 191, 36, .16); color: #fcd34d; border: 1px solid rgba(251, 191, 36, .3); border-radius: 14px; box-shadow: none; }
.notice.bad { background: rgba(255, 143, 115, .14); color: #ffb4a1; border-color: rgba(255, 143, 115, .32); }
.plan-btn { color: var(--ink); background: rgba(18, 40, 60, .55); border: 1px solid var(--edge); border-radius: 999px; }

/* ---------- sign-in (flow #masuk .signcard) ---------- */
.auth-panel { position: absolute; right: 24px; top: calc(100% - 6px); z-index: 50; width: min(440px, calc(100vw - 32px)); padding: 28px; border-radius: 26px;
  background: rgba(18, 40, 60, .9); color: var(--ink); border: 1px solid rgba(186, 230, 253, .18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .10), 0 0 0 1px var(--edge), 0 0 26px var(--glow), 0 30px 70px -32px rgba(2, 10, 20, .75); }
.auth-panel h3 { font-family: 'Bricolage Grotesque', var(--font); font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.auth-panel .form label { color: var(--soft); font-weight: 600; }
.auth-panel .form input { min-height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(8, 22, 36, .55); color: var(--ink); padding: 12px 14px; font-size: 16px; }
.auth-panel .form input:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
.auth-panel .seg { background: rgba(8, 22, 36, .55); border-color: var(--line-2); }
.auth-panel .seg button { color: var(--soft); } .auth-panel .seg button.on { background: linear-gradient(135deg, #22d3ee, #3b82f6); color: #06202b; }
.auth-panel .btn.primary { width: 100%; }

/* ---------- the conversation layout: the hero becomes the chat column over the planet ---------- */
.is-fresh .thread { display: none; }
.app:not(.is-fresh) .hero-eyebrow, .app:not(.is-fresh) .hero-title, .app:not(.is-fresh) .hero-sub, .app:not(.is-fresh) .examples,
.app:not(.is-fresh) .sources, .app:not(.is-fresh) .limits, .app:not(.is-fresh) .page > section, .app:not(.is-fresh) .footer, .app:not(.is-fresh) .copyright,
.app:not(.is-fresh) .nav-links, .app:not(.is-fresh) .skip, .app:not(.is-fresh) .cmd-note { display: none; }
.app:not(.is-fresh) .hero { min-height: 100svh; overflow: visible; }
.app:not(.is-fresh) .hero-inner { transform: none; justify-content: flex-end; align-items: stretch; width: 100%; max-width: 860px; margin: 0 auto; padding: 8px 16px 0; }
.app:not(.is-fresh) .thread { display: flex; flex: 1; padding: 8px 0 16px; }
.app:not(.is-fresh) #cmd { position: sticky; bottom: 12px; z-index: 6; max-width: none; margin-top: 8px; opacity: 1; transform: none; }
.app:not(.is-fresh) .notice, .app:not(.is-fresh) .plan-row { margin-top: 10px; }
@media (max-width: 560px) {
  .auth-panel { right: 12px; left: 12px; width: auto; padding: 22px; }
  .app:not(.is-fresh) .hero-inner { padding: 4px 12px 0; }
  #thread .card { padding: 18px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { #thread .steps li.active::before { animation: none; } }
/* readable over the brightest part of the globe; the sticky command bar never hides a card's actions */
#thread .card, #thread .msg.jot { background: rgba(12, 28, 44, .9); }
#thread .card.plan.locked { opacity: .85; }
#thread > * { scroll-margin-bottom: 150px; }
/* sign-in reachable on every width, before and during a conversation: the nav stays at the top while talking */
.app:not(.is-fresh) .nav { position: sticky; top: 0; z-index: 20; max-width: none; background: rgba(12, 28, 44, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(186, 230, 253, .14); }
.nav-right [data-action="signin"] { display: inline-flex; }
/* the limits line stays readable over the globe (≥ 4.5:1 on its own dark pill) */
.limits { color: #dbeaf3; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 4px 12px; border-radius: 999px; background: rgba(8, 22, 36, .72); }
/* "Sumber web" — a connected public source: PUBLIK (never Aktual) */
#thread .tag.truth.publik, #pending .tag.truth.publik { background: rgba(167, 139, 250, .16); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, .32); }