/* =============================
   BASE
============================= */

.agents-section{
  background:#0f1114;
  padding:10px 40px;
  min-height:100vh;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  color:#c7ccd1;
}
/* =========================================================
   AGENTS SECTION — GRADIENT BACKGROUND
========================================================= */

.agents-section {
  padding:10px 40px;
  min-height:100vh;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(34,197,94,0.07),
      transparent 90%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255,138,43,0.06),
      transparent 95%
    ),
    #0f141b;

  min-height: 100vh;

  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #c7ccd1;
}
.agents-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap:40px;
  max-width:1600px;
  margin:0 auto;
  align-items:start;
}

.agents-col{
  display:flex;
  flex-direction:column;
  min-width:0; /* prevent overflow */
}

/* =============================
   INTRO
============================= */

.intro-col h1{
  font-size:26px;
  color:#e1e4e8;
  margin-bottom:20px;
}

.agents-sub{
  font-size:13px;
  line-height:1.7;
  opacity:.75;
  margin-bottom:20px;
}

.agents-note{
  font-size:12px;
  opacity:.55;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:20px;
}

/* =============================
   BRIEF CARD
============================= */

.brief-col{
  background:#15181d;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:24px;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.card-header h2{
  font-size:16px;
  color:#e6edf3;
}

pre{
  background:#0c0f13;
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  padding:20px;
  font-size:12px;
  line-height:1.6;
  max-height:480px;
  overflow-y:auto;
  color:#9aa3ad;
  white-space:pre-wrap;
  word-break:break-word;
}
pre{
  background:#0d1117;                 /* GitHub dark */
  border:1px solid #30363d;
  border-radius:8px;

  padding:24px;
  margin-top:14px;

  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  line-height:1.7;

  color:#c9d1d9;                       /* README text color */

  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
/* scrollbar */
pre::-webkit-scrollbar{
  width:6px;
}
pre::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:4px;
}

/* =============================
   COPY BUTTON
============================= */

.copy-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#b8c1cc;
  padding:6px 12px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
}

/* =============================
   TELEGRAM DEMO
============================= */

.demo-col{
  display:flex;
  justify-content:center;
}

.phone{
  width:340px;
  height:600px;
  max-width:100%;
  background:#000;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.8);
  display:flex;
  flex-direction:column;
}

.header{
  height:60px;
  background:#111;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:10px;
  border-bottom:1px solid #222;
}

.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#9333ea,#ec4899);
}

.header-text{
  color:#fff;
  font-size:14px;
}

.chat{
  flex:1;
  padding:16px;
  overflow-y:auto;        /* ✅ enable scroll */
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;

  position:relative;

  background:#0b141a;
}
.chat::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.04;

  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 0px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 0px, transparent 2px);
  background-size:120px 120px;
}

.message{
  max-width:75%;
  padding:10px 12px;
  border-radius:16px;
  font-size:12px;
  line-height:1.4;
  animation:fadeIn .25s ease;
  white-space:pre-line;
}

.system{
  align-self:center;
  background:#111;
  color:#10b981;
  font-size:11px;
}
.bot{
  align-self:flex-start;
  background:#202c33;
  color:#e9edef;
  border-bottom-left-radius:6px;
}

.owner{
  align-self:flex-end;
  background:#005c4b;
  color:#e9edef;
  border-bottom-right-radius:6px;
}
.message{
  box-shadow:0 1px 0 rgba(0,0,0,0.4);
}
.header{
  background:#202c33;
  border-bottom:1px solid #111b21;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@keyframes fadeIn{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}

/* =============================
   RESPONSIVE BREAKPOINTS
============================= */

/* Tablet */
@media (max-width:1200px){
  .agents-grid{
    grid-template-columns: 1fr 1fr;
  }

  .demo-col{
    grid-column: span 2;
  }
}

/* Mobile */
/* =============================
   FORCE MOBILE STACK FIX
============================= */
/* =============================
   MOBILE FIX — COLOR + DEMO WIDTH
============================= */

@media (max-width: 768px){

  /* ---------
     GRID FIX
  ---------- */
  .agents-grid{
    display:flex !important;
    flex-direction:column !important;
  }

  .agents-col{
    width:100% !important;
  }

  /* ---------
     INTRO COLOR FIX
  ---------- */

  .intro-col h1{
    color:#e6edf3; /* lebih terang */
  }

  .intro-col .agents-sub{
    color:#b6bec8; /* lebih readable */
    opacity:1;
  }

  .intro-col .agents-note{
    color:#98a2ad;
    opacity:1;
  }

  /* ---------
     TELEGRAM FULL WIDTH
  ---------- */

  .demo-col{
    display:flex;
    justify-content:center;
  }

  .phone{
    width:100% !important;
    max-width:420px;
    height:640px;
    border-radius:22px;
  }

}
.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff; /* fallback bg */
}

.avatar img{
  width:100%;
  height:100%;
}
.message{
  max-width:75%;
  padding:8px 12px 18px 12px;
  border-radius:14px;
  font-size:12px;
  line-height:1.45;
  position:relative;
  display:inline-flex;
  flex-direction:column;
}

.msg-time{
  position:absolute;
  right:8px;
  bottom:4px;
  font-size:10px;
  opacity:.55;
}
/* =========================================
   AGENT HEADER LINK
========================================= */

.header-text{
  font-size:12px;
  letter-spacing:.04em;
}

.header-text a{
  display:inline-flex;
  align-items:center;

  padding:6px 12px;
  border-radius:8px;

  background:rgba(44,255,154,.08);
  border:1px solid rgba(44,255,154,.25);

  color:var(--green-400);
  font-weight:600;

  text-decoration:none;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.header-text a:hover{
  background:rgba(44,255,154,.18);
  border-color:rgba(44,255,154,.45);

  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(44,255,154,.25);
}