/* Ganti URL dengan yang dari Fontshare */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,700&display=swap');

/* Gaya dasar untuk font */
body {
    font-family: 'Satoshi', sans-serif;
}

/* Scrollbar kustom untuk chat container */
.chat-container::-webkit-scrollbar {
    width: 6px;
}
.chat-container::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.chat-container::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}

/* Styling untuk block kode */
.code-block-wrapper {
    background-color: #282c34;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 0.5rem;
}
.code-block-header {
    background-color: #3a4049;
    padding: 0.5rem 1rem;
    font-family: monospace;
    font-size: 0.875rem;
    color: #abb2bf;
}
pre code.hljs {
    padding: 1rem;
    background-color: transparent !important;
}
pre {
    padding: 0;
    margin: 0 !important;
    position: relative;
}

/* Tombol Salin di block kode */
.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #4b5263;
    color: #abb2bf;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    z-index: 10;
}

/* Marker untuk konten Markdown, digunakan untuk posisi tombol ekspor pesan tunggal */
.markdown-content {
    position: relative;
}

/* Ini adalah CSS, tempatnya di style.css */

/* Aturan ini menargetkan elemen dengan class 'avatar-spesial'
   dan mengganti gambarnya. */
.avatar-spesial {
  content: url('6.png');
}