/* =====================================================================
   shepherd.css — lapisan tampilan baru (hangat, krem, serif elegan)
   Mengikuti referensi dashboard "Shepherdly":
   - latar krem hangat + kartu lembut berpinggiran halus
   - judul Playfair Display (kata kunci miring berwarna emas)
   - label kecil bergaya mono kapital (JetBrains Mono)
   - tombol utama pil gelap
   Dimuat PALING AKHIR (setelah theme.css) di setiap halaman.
   ===================================================================== */

:root{
  --font-sans:'Inter',system-ui,sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --ink:#f4ebdc;
  --surface:#faf6ec;
  --surface-2:#efe5d2;
  --surface-3:#e5d8c0;
  --border:#e6dac3;

  --text:#1d1914;
  --text-dim:#6a6154;
  --text-faint:#9a8f7d;

  --gold:#b27a3b;
  --gold-deep:#8f5f27;
  --rose:#b8603f;

  --sage:#6b7a5e;
  --sage-soft:#e4e9da;

  --r-lg:24px;
  --r-md:18px;
  --r-sm:14px;
  --shadow:0 1px 2px rgba(60,40,10,.04),0 14px 32px rgba(60,40,10,.07);

  --nav-bg:rgba(250,246,236,.86);
  --nav-border:rgba(60,40,10,.09);
  --nav-shadow:0 12px 30px rgba(60,40,10,.12);
}
html.dark-mode,body.dark-mode{
  --ink:#14110d;
  --surface:#1e1a15;
  --surface-2:#292319;
  --surface-3:#342c20;
  --border:#352d22;

  --text:#f2ebdf;
  --text-dim:#b2a794;
  --text-faint:#7e7463;

  --gold:#d49b52;
  --gold-deep:#b27a3b;
  --rose:#d97757;

  --sage:#8a9a7b;
  --sage-soft:#2a3024;

  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 32px rgba(0,0,0,.4);
  --nav-bg:rgba(30,26,21,.82);
  --nav-border:rgba(255,255,255,.07);
  --nav-shadow:0 12px 30px rgba(0,0,0,.5);
}

html,body,button,input,textarea,select{ font-family:var(--font-sans) !important; }
body::before{ background:none !important; }          /* hilangkan blob warna lama */
body::after{ opacity:.025; }

/* ---------- Judul & label ---------- */
h1,h2,.hero-title,.promo-title,.sheet-title,.tb-hero-title{
  font-family:var(--font-serif) !important; font-weight:500 !important; letter-spacing:-.01em;
}
.mono,.verse-eyebrow,.promo-eyebrow,.greeting-date,.section-title,.brand-name,
.tb-pill,.tb-hint{
  font-family:var(--font-mono) !important;
}

/* ---------- Tombol utama: pil gelap ---------- */
.button,.btn,.promo-btn{
  background:var(--text) !important; color:var(--surface) !important;
  border-radius:999px !important; font-weight:500 !important; letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(30,20,5,.18) !important;
}
body.dark-mode .button,body.dark-mode .btn,body.dark-mode .promo-btn{
  background:var(--text) !important; color:var(--ink) !important;
}
.promo-card.teal .promo-btn,.promo-card.rose .promo-btn{
  background:#faf6ec !important; color:#1d1914 !important;
}

/* ---------- Kartu ---------- */
.card,.top-card,.journey,.selector-box,.post-box,.popupBox,.infoBox,#infoBox{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important; box-shadow:var(--shadow) !important;
}
.menu{ border-radius:var(--r-md) !important; }
.chip{ border-radius:999px !important; font-family:var(--font-mono); font-size:11px !important; letter-spacing:.04em; }

/* ---------- Beranda ---------- */
.top-row{ padding-top:22px; }
.brand-name{
  font-size:11px !important; font-weight:500 !important; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim) !important;
}
.brand .icon,.brand .iconbtn{ color:var(--text-dim) !important; }
.streak-pill{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  color:var(--text) !important; font-family:var(--font-mono); font-size:12px !important;
  box-shadow:0 1px 2px rgba(60,40,10,.04);
}

.greeting-block{ padding-top:30px !important; padding-bottom:6px !important; }
.greeting-date{
  font-size:11px !important; letter-spacing:.2em !important;
  text-transform:uppercase; color:var(--text-faint) !important;
}
.greeting-line{
  font-family:var(--font-serif) !important; font-weight:500 !important;
  font-size:clamp(34px,9.5vw,46px) !important; line-height:1.08 !important;
  letter-spacing:-.02em !important; margin-top:12px !important; color:var(--text) !important;
}
.greeting-line em{ font-style:italic; font-weight:400; color:var(--gold); }

.section-title{
  font-size:11px !important; font-weight:500 !important; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-faint) !important;
  margin-top:30px !important;
}
.section-title::after{ content:" →"; letter-spacing:0; }
.section-link a{ font-family:var(--font-mono); font-size:11px !important; letter-spacing:.1em; text-transform:uppercase; }

/* segmented control → pil krem, indikator gelap */
.tab-pills{ background:var(--surface-2) !important; border:1px solid var(--border); }
.tab-pill-indicator{
  background:var(--text) !important; box-shadow:0 4px 12px rgba(30,20,5,.22) !important;
}
.tab-pill{ font-family:var(--font-mono) !important; font-size:11px !important; letter-spacing:.06em; }
.tab-pill.active{ color:var(--surface) !important; }
body.dark-mode .tab-pill.active{ color:var(--ink) !important; }

/* kartu ayat & promo: foto tetap, tipografi serif */
.verse-card,.promo-card{
  border-radius:28px !important; border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 18px 40px rgba(60,40,10,.2) !important;
}
.verse-eyebrow,.promo-eyebrow{ font-size:10.5px !important; letter-spacing:.2em !important; font-weight:500 !important; }
.verse-ref-big{ font-family:var(--font-mono); font-size:12px !important; letter-spacing:.12em; font-weight:500 !important; }
.verse-text-big{ font-family:var(--font-serif) !important; font-style:italic; font-weight:400 !important; }
.promo-title{ font-size:26px !important; font-weight:500 !important; line-height:1.15; }
.vact{ font-family:var(--font-mono); font-size:11.5px !important; letter-spacing:.04em; font-weight:500 !important; }

.plan-chip{ background:var(--surface) !important; border-radius:16px !important; box-shadow:var(--shadow) !important; }
.menu .tile-icon{ border-radius:18px !important; background:var(--surface) !important; }
.grid .menu span.label{ font-size:11.5px !important; }
.all-features-sheet{ background:var(--surface) !important; border-radius:28px 28px 0 0 !important; }
.sheet-title{ font-size:24px !important; }
.carousel{ border-radius:24px !important; box-shadow:var(--shadow) !important; }

/* ---------- Menu bawah: kartu melayang, item aktif bergaya sidebar ---------- */
.bottom-nav,body.dark-mode .bottom-nav{
  border-radius:26px !important; padding:8px 8px !important; gap:2px;
}
.nav-item,.bottom-nav .item{
  padding:8px 4px !important; border-radius:18px !important; flex:1;
  font-family:var(--font-sans) !important; font-size:10.5px !important; letter-spacing:.01em;
}
.nav-item.active,.bottom-nav .item.active,
body.dark-mode .nav-item.active,body.dark-mode .bottom-nav .item.active{
  background:var(--surface-2) !important; color:var(--text) !important; font-weight:600 !important;
}
.nav-item.active .icon,.bottom-nav .item.active .icon{ color:var(--gold-deep); }

/* ---------- Drawer ---------- */
.drawer-item{ font-size:14px !important; }
.drawer .drawer-header{ border-radius:0 0 28px 28px; }
.drawer .drawer-item{ margin:2px 10px; border-radius:14px; }

/* ---------- Layar lebar: menu bawah berubah jadi sidebar kiri (ala referensi) ---------- */
@media (min-width:960px){
  body:has(.bottom-nav){ padding-left:248px !important; padding-bottom:40px !important; }
  body:has(.bottom-nav) > *:not(.bottom-nav):not(.drawer):not(.overlay):not(.sheet-overlay):not(.all-features-sheet):not(script):not(style){
    max-width:760px; margin-left:auto !important; margin-right:auto !important;
  }
  .bottom-nav,body.dark-mode .bottom-nav{
    left:0 !important; top:0 !important; bottom:0 !important; right:auto !important;
    width:232px; flex-direction:column !important; justify-content:flex-start !important;
    align-items:stretch !important; gap:4px !important;
    padding:76px 14px 20px 14px !important; border-radius:0 !important;
    border:none !important; border-right:1px solid var(--border) !important;
    background:var(--surface) !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .bottom-nav::before{
    content:"BELIEVE IN GOD"; position:absolute; top:28px; left:26px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--text-dim);
  }
  .nav-item,.bottom-nav .item{
    flex:none !important; flex-direction:row !important; justify-content:flex-start !important;
    gap:12px !important; padding:11px 14px !important; font-size:13.5px !important;
    border-radius:12px !important; width:100%;
  }
}

/* ---------- Halaman Teman Belajar: kartu obrolan ---------- */
body.chat-page{ background:var(--ink) !important; }
.tb-shell{
  flex:1; min-height:0; display:flex; flex-direction:column;
  width:100%; max-width:760px; margin:0 auto; padding:14px;
}
.tb-card{
  flex:1; min-height:0; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border);
  border-radius:28px; box-shadow:var(--shadow); overflow:hidden;
}
.tb-card .header{
  padding:16px 18px !important; gap:12px; justify-content:flex-start !important;
  border-bottom:1px solid var(--border) !important; background:transparent !important;
}
.tb-head-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--sage-soft); color:var(--sage);
  display:flex; align-items:center; justify-content:center;
}
.tb-head-text{ flex:1; min-width:0; }
.tb-head-text .tb-title{
  font-family:var(--font-sans) !important; font-weight:600 !important; font-size:16px !important;
  color:var(--text); display:block; line-height:1.25;
}
.tb-head-sub{ font-size:12.5px; color:var(--text-faint); display:block; margin-top:2px; }
.tb-online{
  font-family:var(--font-sans); font-size:12px; font-weight:600;
  color:#1f8a4c; background:#dcf3e3; padding:3px 12px; border-radius:999px;
}
body.dark-mode .tb-online{ color:#7fd9a0; background:#1c3326; }
.tb-card .tb-back-btn,.tb-card .tb-history-btn{ width:34px; height:34px; flex-shrink:0; }

.tb-card .chat-scroll{ background:transparent; }
.tb-card .container{ padding:0 22px 16px 22px; max-width:none; }

.tb-hero-title{ font-size:clamp(26px,6vw,34px) !important; font-style:normal !important; }
.tb-hero-title em{ font-style:italic; color:var(--gold); }
.tb-hero-icon{ color:var(--sage) !important; }
.tb-suggest span{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:999px !important; color:var(--text-dim) !important; padding:9px 15px !important;
}
.tb-suggest span:hover{ background:var(--surface-2) !important; }

.tb-msg-label{ font-family:var(--font-mono) !important; font-style:normal !important;
  font-size:10px !important; letter-spacing:.16em; text-transform:uppercase; }
.tb-msg{ border-radius:18px !important; font-size:14.5px !important; }
.tb-msg.user{
  background:var(--sage-soft) !important; color:var(--text) !important;
  border-bottom-right-radius:6px !important;
}
.tb-msg.bot{
  font-family:var(--font-sans) !important; font-size:14.5px !important;
  color:var(--text) !important; line-height:1.7 !important; padding:0 2px !important;
}
.tb-caret{ background:var(--sage) !important; }
.tb-typing-dots span{ background:var(--sage) !important; }

.tb-card .tb-input-bar{ background:transparent !important; padding:6px 20px 18px 20px; }
.tb-card .tb-input-wrap{ max-width:none; }
.tb-card .tb-composer{
  background:transparent !important; box-shadow:none !important; border:none !important;
  padding:0 !important; display:flex; align-items:center; gap:10px;
}
.tb-card .tb-input-row{ flex:1; }
.tb-card .tb-input-row textarea{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:16px !important; padding:13px 16px !important; font-size:14px !important;
  min-height:46px !important; box-shadow:0 1px 2px rgba(60,40,10,.03);
}
.tb-card .tb-input-row textarea:focus{ border-color:var(--sage) !important; }
.tb-card .tb-composer-toolbar{ margin-top:0 !important; }
.tb-card .tb-composer-left{ display:none; }
.tb-card .tb-send-btn{
  width:46px !important; height:46px !important; border-radius:14px !important;
  background:var(--sage) !important; color:#fff !important; opacity:.6;
}
.tb-card .tb-send-btn.ready{ opacity:1; background:var(--sage) !important; color:#fff !important; }
.tb-card .tb-hint{ margin-top:12px; font-family:var(--font-sans) !important; font-size:11.5px !important; }

.tb-drawer{ background:var(--surface) !important; border-radius:0 28px 28px 0; }
.tb-drawer-newchat{ background:var(--text) !important; color:var(--surface) !important; border-radius:999px !important; }
.tb-session-item{ border-radius:14px !important; }

@media (max-width:520px){
  .tb-shell{ padding:0; }
  .tb-card{ border-radius:0; border:none; box-shadow:none; background:var(--ink); }
  .tb-card .header{ background:var(--surface) !important; }
}

.drawer:not(.open){ box-shadow:none !important; }
.promo-btn{ width:auto; align-self:flex-start; }
.top-row ~ .section-title{ margin-left:0 !important; margin-right:0 !important; }