:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --card:#f8fafc;
  --ring:#e5e7eb;
  --brand:#6366f1;
  --shadow:0 6px 20px rgba(2,6,23,.06);
  --radius:14px;
}

/* Global */
*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  background:var(--bg);
  

}

/* ================= TOPBAR ================= */

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid #eef2ff;
}

.topbar-inner{
  max-width:1200px;        /* layout ile aynı genişlik */
  margin:0 auto;
  padding:10px 12px;       /* layout padding'i ile hizalı */
  display:flex;
  align-items:center;
  justify-content:flex-start; /* brand solda */
}

/* Soldaki boş alan – ortalamayı sağlar */
.topbar-spacer{
  flex:1;
  display:none; 
}
/* Ortadaki logo + başlık */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#60a5fa,#6366f1);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  box-shadow:0 8px 24px rgba(99,102,241,.35);
}

.title{
  font-weight:700;
  letter-spacing:.2px;
}

/* Sağdaki Prompts linki */
.topbar-nav{
  flex:0;
  display:flex;
  justify-content:flex-end;
  margin-left:auto; 
}



.topbar-link{
  font-weight:500;
  font-size:0.95rem;
  text-decoration:none;
  color:#1d4ed8;
  margin-left:20px; 
}

/* ================= LAYOUT ================= */

.layout{
  max-width:1200px;
  margin:18px auto;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:16px;
  padding:0 12px;
}

@media (max-width:980px){
  .layout{
    grid-template-columns:1fr;
  }
  .sidebar{
    order:-1;
  }
}

/* ================= MAIN ================= */

.main{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Agent Head */
.agent-head{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

.agent-info{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.agent-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #eef2ff;
}

.agent-name{
  margin:0 0 2px 0;
  font-size:18px;
}

.agent-desc{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.agent-tags{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.tag{
  font-size:11px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  background:#eef2ff;
  color:#334155;
  border:1px solid #e2e8f0;
}

/* Outputs (ileride kullanırsan diye bıraktım) */
.outputs{
  border-top:1px dashed #e6e9f5;
  padding-top:12px;
}

.outputs-title{
  margin:0 0 8px 0;
  font-size:14px;
  color:#334155;
}

.outputs-wrap{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

@media (max-width:760px){
  .outputs-wrap{
    grid-template-columns:1fr;
  }
}

.output{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:10px;
  box-shadow:var(--shadow);
  font-size:13px;
  color:#0f172a;
  min-height:64px;
  overflow:auto;
  white-space:pre-wrap;
}

/* ================= CHAT ================= */

.chat{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;
}

.chat-log{
  max-height:46vh;
  min-height:240px;
  overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.bubble{
  max-width:72%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e6e9f5;
  background:#f8fafc;
  white-space:pre-wrap;
}

.msg.me .bubble{
  background:#eff6ff;
  border-color:#dbeafe;
}

.msg .avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #eef2ff;
}

.chat-input{
  display:flex;
  gap:8px;
  border-top:1px solid #eef2ff;
  padding:10px;
}

.chat-input input{
  flex:1;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}

.chat-input input:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px #93c5fd33;
}

.btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
}

.btn.primary{
  background:#eef2ff;
  border-color:#a5b4fc;
}

/* ================= SIDEBAR ================= */

.sidebar{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px;
  height:fit-content;
  position:sticky;
  top:70px;
}

.sidebar-head{
  font-weight:700;
  margin:4px 4px 10px;
}

.agent-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:70vh;
  overflow:auto;
}

.agent-item{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--ring);
  border-radius:12px;
  padding:8px;
  background:#fff;
  cursor:pointer;
}

.agent-item:hover{
  border-color:#c7d2fe;
  background:#f8fafc;
}

.agent-item.is-active{
  border-color:#93c5fd;
  background:#eff6ff;
}

.agent-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

.agent-item .name{
  font-weight:600;
  font-size:14px;
}

.agent-item .small{
  font-size:12px;
  color:var(--muted);
}


/* Footer */
.site-footer{
      border-top:1px solid #e2e8f0;
      background:#f8fafc;
      padding:14px var(--pad) 22px;
      min-height:   3vh;
    }
.footer-inner{
      max-width:var(--wrap);
      margin:0 auto;
      display:flex;
      flex-wrap:wrap;
      gap:8px 18px;
      align-items:center;
      justify-content:center;
      font-size:13px;
      color:var(--muted);
      text-align:center;
    }
.footer-owner{
      font-weight:600;
      text-decoration:none;
      color:var(--text);
    }
.footer-owner:hover{
      color:var(--brand);
    }
.footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:8px 12px;
      align-items:center;
      justify-content:center;
    }
.footer-label{
      font-weight:500;
    }
.footer-links a{
      text-decoration:none;
      color:var(--muted);
    }
.footer-links a:hover{
      color:var(--brand);
    }
@media (max-width:640px){
  .footer-inner{
        flex-direction:column;
      }
    }

.layout{
  min-height: 85vh;
}