/* ================== PRIMES AI — CHAT PAGE (Final 1-row Composer) ================== */
/* Mobile-first, aman notch (safe-area), composer pill fixed di atas nav */

:root{
  --gold:#ffd700;
  --gold-2:#ffb700;

  --bg:#141110;
  --nav-bg:#181210;
  --footer-bg:#0a0807;

  --border:#ffb700bb;
  --border-soft:#ffb70044;

  --header-h:60px;
  --footer-h:68px;
  --form-h:52px; /* baseline kalkulasi layout */
}

/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  min-height:100%;
  background:var(--bg);
  color:#ffe9b6;
  font:400 15px/1.55 Inter,"Segoe UI",Arial,sans-serif;
}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{position:fixed;left:12px;top:12px;padding:8px 10px;background:#000;color:#fff;border-radius:8px;z-index:2000}

/* Header */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:1000;
  background:var(--nav-bg); box-shadow:0 2px 16px #ffb70022;
  display:flex; align-items:center;
}
.brand{display:flex; align-items:center; gap:12px; padding-left:14px; height:var(--header-h)}
.brand a{display:flex; align-items:center; text-decoration:none}
.brand-logo{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);background:#181110;object-fit:cover}
.brand-glow{color:var(--gold);font-weight:800;letter-spacing:2px;text-shadow:0 0 14px #ffb700aa, 0 0 4px #ffe067}
.sub{color:#fff3b0;font-weight:600;opacity:.87;text-shadow:0 0 10px #ffef9f40}

/* Footer nav */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; height:var(--footer-h); z-index:1000;
  background:var(--footer-bg); border-top:2px solid #ffb70044;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:env(safe-area-inset-bottom);
}
.footer-content{height:100%; width:100%}
.footer-nav{display:flex; justify-content:space-around; align-items:center; width:100%; max-width:520px; margin:0 auto; padding:0 12px}
.footer-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:#8a7a3f; text-decoration:none; font-size:.78em; padding:6px 10px; border-radius:10px; transition:.2s; min-width:56px;
}
.footer-item:hover{color:var(--gold); background:rgba(255,183,0,.1)}
.footer-item.active{color:var(--gold); background:rgba(255,183,0,.15)}
.footer-item svg{width:20px;height:20px}
.footer-item span{font-weight:600; letter-spacing:.02em}

/* Layout utama */
main{
  margin-top:calc(var(--header-h) + 6px);
  margin-bottom:calc(var(--footer-h) + var(--form-h) + env(safe-area-inset-bottom));
  display:flex; justify-content:center; align-items:flex-start;
  padding:0 8px;
}

/* Frame tengah (garis + rounded) */
.chat-page-container{
  position:relative;
  width:100%; max-width:940px;
  min-height:calc(100dvh - var(--header-h) - var(--footer-h) - var(--form-h) - env(safe-area-inset-bottom) - 6px);
  padding:0 6px;
}
.chat-page-container::before{
  content:""; position:absolute; inset:0 6px; z-index:0;
  border:1.6px solid var(--border);
  border-radius:14px;
  box-shadow:0 8px 32px 0 #ffb70028 inset, 0 0 80px 0 #ffe06725 inset;
  pointer-events:none;
}

/* History scroll */
#history{
  position:relative; z-index:1;
  margin:0 auto; max-width:760px; width:100%;
  display:flex; flex-direction:column; gap:10px;
  padding:10px 8px 26px;
  background:transparent;

  height:calc(100dvh - var(--header-h) - var(--footer-h) - var(--form-h) - env(safe-area-inset-bottom) - 16px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

/* Bubbles */
.bubble{
  margin:10px 12px 6px; padding:12px 16px; border-radius:14px;
  max-width:96%; font-size:1.04em; line-height:1.58; word-break:break-word;
  box-shadow:0 2px 14px 0 #ffde9e0d;
}
.bubble.user{
  background:linear-gradient(90deg,#ffd700 0%,#ffb700 100%);
  color:#181110; font-weight:700; align-self:flex-end;
  border:1.1px solid #ffe0878a;
}
.bubble.bot{
  background:rgba(50,40,16,.95); color:#ffde86; align-self:flex-start;
  border:1.1px solid #ffd70044;
}
.bubble p{margin:.3em 0}
.bubble ul,.bubble ol{margin:.2em 0; padding-left:1em}
.bubble li{margin:.1em 0; line-height:1.45}
.bubble a{color:var(--gold); text-decoration:underline}
.bubble a:hover{color:#fff1a1; text-shadow:0 0 8px #ffec944d}

/* Composer pill — fixed di atas footer */
.chat-composer{
  position:fixed; left:0; right:0;
  bottom:calc(var(--footer-h) + 6px + env(safe-area-inset-bottom));
  z-index:1101;
  background:transparent; border:0; box-shadow:none; padding:0;
}
.chat-form-inner{
  width:min(100vw - 16px, 760px);
  margin:0 auto; display:flex; align-items:center; gap:8px;
  background:#1a120a; border:1px solid var(--border-soft); border-radius:16px;
  padding:4px 8px; /* ramping agar betul-betul 1 baris */
  box-shadow:0 10px 22px #00000035, 0 0 14px #ffb7001c;
}
.chat-input-dedicated{
  flex:1; min-width:0;

  /* 1 ROW by default, auto-grow via JS */
  height:auto; min-height:0; max-height:132px;
  line-height:1.35; font-size:1em; padding:6px 10px;

  background:transparent; color:#ffd969; border:0; outline:none;
  resize:none; overflow:hidden;
}
.chat-input-dedicated:focus{ color:#fffbe7 }
.chat-btn-dedicated{
  height:40px; width:40px; min-width:40px; border:none; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg,#ffb700 0%,#fff1a1 100%); color:#181c1f;
  transition:transform .12s ease, opacity .15s ease;
}
.chat-btn-dedicated:hover{ transform:scale(1.05) }
.chat-btn-dedicated:disabled{ background:#554d2e; opacity:.45; cursor:not-allowed }

/* Analyzing bubble */
.bubble.analyzing{
  position:relative; align-self:flex-start; color:#ffe9b6;
  background:linear-gradient(180deg, rgba(45,35,14,.96) 0%, rgba(32,24,10,.96) 100%);
  border:1.2px dashed #ffca4c88;
  box-shadow:0 0 0 1px rgba(255,199,72,.08) inset, 0 10px 24px rgba(0,0,0,.35), 0 0 22px rgba(255,183,0,.12);
  padding:12px 16px 16px;
}
.bubble.analyzing::before{
  content:""; position:absolute; inset:1px; border-radius:12px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,220,120,.08) 50%, transparent 100%);
  animation:shimmer 1.8s linear infinite; pointer-events:none; opacity:.6;
}
.bubble.analyzing::after{
  content:""; position:absolute; left:12px; right:12px; bottom:10px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, #ffd36a 0%, #ffb700 60%, #ffeaa1 100%);
  box-shadow:0 0 8px #ffdf87aa, 0 0 2px #ffcc55;
  transform-origin:left; animation:loadbar 2.2s ease-in-out infinite; opacity:.9;
}
.bubble.analyzing .typing{display:flex; align-items:center; gap:6px; margin-bottom:4px}
.bubble.analyzing .dot{width:8px; height:8px; border-radius:50%; background:#ffd36a; box-shadow:0 0 10px #ffd36a99; animation:bounce 1.1s infinite ease-in-out}
.bubble.analyzing .dot:nth-child(2){animation-delay:.15s}
.bubble.analyzing .dot:nth-child(3){animation-delay:.3s}
.bubble.analyzing .hint{font-size:.9em; opacity:.85; letter-spacing:.02em; color:#ffe8b4}
@keyframes shimmer{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@keyframes loadbar{0%{transform:scaleX(.08);opacity:.65}50%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.08);opacity:.65}}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.85}40%{transform:translateY(-6px);opacity:1}}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:#393004;border-radius:3px}
::-webkit-scrollbar-track{background:#181110}

/* Mobile tweaks */
@media (max-width:700px){
  :root{ --header-h:54px; --footer-h:65px; --form-h:50px }
  .brand{padding-left:12px; gap:10px}
  .brand-logo{width:30px;height:30px}
  main{margin-top:60px;margin-bottom:calc(var(--footer-h) + var(--form-h) + env(safe-area-inset-bottom));padding:0 8px}
  .chat-page-container{padding:0 6px}
  .chat-page-container::before{left:6px; right:6px; border-radius:14px}
  #history{padding:10px 8px 26px}
  .chat-form-inner{width:min(100vw - 12px, 760px)}
}

/* Focus visible */
a:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px dashed #ffd700;outline-offset:3px}
/* ===== PATCH: Mobile readability & layout safety (append this at the end) ===== */

/* 1) Hero / header copy lebih terkendali di mobile */
.page-hero{
  padding: 14px 12px 6px;
  max-width: 760px;
  margin: 0 auto;
}
.page-hero h1{
  font-size: clamp(1.25rem, 2.8vw + 0.6rem, 1.75rem);
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 0 0 6px;
  color: #ffe7a3;
}
.page-hero .lede{
  font-size: .98rem;
  line-height: 1.55;
  color: #ffe9b6;
  opacity: .95;
}

/* 2) Bubble text: pastikan tidak “menurun per huruf” */
.bubble{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 3) Area history: beri ruang di bawah supaya tidak ketutup composer */
#history{
  padding-bottom: calc(var(--form-h) + 18px) !important;
}

/* 4) Composer: pastikan betul-betul 1 baris di awal (tinggi stabil) */
.chat-input-dedicated{
  line-height: 1.25;
  min-height: 1.25em;       /* baseline text */
  padding-top: 8px;
  padding-bottom: 8px;
  /* biarkan auto-expand via JS; max-height sudah didefinisikan di atas */
}

/* 5) CTA utama (opsional, jika dipakai di HTML) */
.cta-wrap{
  max-width: 760px;
  margin: 6px auto 2px;
  padding: 0 8px;
}
.cta-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg,#ffb700 0%,#fff1a1 100%);
  color: #181110;
  font-weight: 800;
  border: 1px solid #ffe0878a;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 12px #ffb70022;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 14px #ffb70033; }

/* 6) Frame dekoratif: sedikit longgar agar tidak “menekan” konten di HP kecil */
@media (max-width: 430px){
  .chat-page-container::before{ inset: 0 4px; }
  #history{ padding-left: 10px; padding-right: 10px; }
}

/* 7) Aksesibilitas fokus yang lebih lembut */
a:focus-visible,button:focus-visible,textarea:focus-visible{
  outline: 2px dashed #ffd36a;
  outline-offset: 2px;
}
/* === FIX LAYOUT: stack hero di atas chat (bukan 2 kolom) === */
main{
  display:flex;
  flex-direction: column;   /* <-- ini yang bikin tidak 2 kolom lagi */
  align-items: center;      /* biar konten tetap center */
}

/* Lebarkan hero agar senada dengan frame tengah */
.page-hero{
  width:100%;
  max-width: 760px;         /* selaras dengan #history */
  margin: 0 auto;
  padding: 14px 12px 6px;
}
.page-hero h1{
  font-size: clamp(1.25rem, 2.8vw + 0.6rem, 1.75rem);
  line-height: 1.35;
  margin: 0 0 6px;
  color: #ffe7a3;
}
.page-hero .lede{
  font-size: .98rem;
  line-height: 1.55;
  color: #ffe9b6;
  opacity: .95;
}

/* Pastikan bubble membungkus teks normal */
.bubble{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* History ada ruang bawah agar tidak ketutup composer */
#history{ padding-bottom: calc(var(--form-h) + 18px) !important; }

/* Composer tetap start 1 baris */
.chat-input-dedicated{
  line-height: 1.25;
  min-height: 1.25em;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Sedikit longgarkan frame di HP kecil */
@media (max-width: 430px){
  .chat-page-container::before{ inset: 0 4px; }
  #history{ padding-left: 10px; padding-right: 10px; }
}