/* ask.co.id — tampilan chat publik. Token dulu, komponen belakangan. Gelap/terang ikut sistem, bisa ditimpa lewat [data-tema] di . */ :root { --krem: #faf9f7; --bg: var(--krem); --permukaan: #ffffff; --garis: #e7e3dc; --garis-lembut: #f0ece5; --teks: #1a1917; --teks-lembut: #6b665e; --teks-samar: #97918a; --merah: #c8102e; --merah-tua: #a30d26; --merah-samar: #fdf0f2; --hijau: #0f7b4f; --kode-bg: #f5f2ec; --sidebar: #f4f1eb; --radius: 14px; --lebar-isi: 748px; --sidebar-w: 268px; --shadow: 0 1px 2px rgba(26, 25, 23, .05), 0 8px 24px rgba(26, 25, 23, .06); } @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --bg: #141312; --permukaan: #1d1c1a; --garis: #322f2b; --garis-lembut: #262421; --teks: #f2efea; --teks-lembut: #a8a29a; --teks-samar: #7d776f; --merah: #e8536a; --merah-tua: #f0798c; --merah-samar: #2a1518; --hijau: #4ec18a; --kode-bg: #211f1c; --sidebar: #191817; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } } :root[data-tema="gelap"] { --bg: #141312; --permukaan: #1d1c1a; --garis: #322f2b; --garis-lembut: #262421; --teks: #f2efea; --teks-lembut: #a8a29a; --teks-samar: #7d776f; --merah: #e8536a; --merah-tua: #f0798c; --merah-samar: #2a1518; --hijau: #4ec18a; --kode-bg: #211f1c; --sidebar: #191817; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--teks); font: 16px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; -webkit-font-smoothing: antialiased; display: flex; overflow: hidden; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } :focus-visible { outline: 2px solid var(--merah); outline-offset: 2px; border-radius: 6px; } /* ---------- sidebar riwayat ---------- */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--garis); display: flex; flex-direction: column; transition: margin-left .22s cubic-bezier(.4,0,.2,1); } body.sidebar-tutup .sidebar { margin-left: calc(-1 * var(--sidebar-w)); } /* Satu kontrol, dua tempat. Waktu sidebar kebuka, tombolnya ada DI sidebar. Waktu ketutup, tombol yang sama muncul di topbar persis di posisi yang ditinggalkan. Kalau dua-duanya tampil bareng, user lihat dua hamburger berdempetan yang kerjanya berlawanan. */ .topbar .tombol-panel { width: 0; opacity: 0; pointer-events: none; margin-right: -10px; transition: width .18s cubic-bezier(.4,0,.2,1), opacity .14s, margin-right .18s; } body.sidebar-tutup .topbar .tombol-panel { width: 32px; opacity: 1; pointer-events: auto; margin-right: 0; transition-delay: .12s; /* nunggu sidebar selesai geser dulu, biar nggak tabrakan */ } .sidebar-atas { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; } .merk { font-weight: 700; letter-spacing: -.025em; font-size: 17px; padding: 0 4px; } .merk span { color: var(--merah); } .ikon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; /* tanpa ini tombolnya kepencet gepeng waktu topbar sempit */ color: var(--teks-lembut); transition: background .14s, color .14s; } .ikon-btn:hover { background: rgba(0,0,0,.05); color: var(--teks); } .btn-baru { margin: 4px 12px 10px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); font-size: 14px; font-weight: 500; transition: border-color .14s, transform .06s; } .btn-baru:hover { border-color: var(--merah); color: var(--merah); } .btn-baru:active { transform: scale(.99); } .riwayat { flex: 1; overflow-y: auto; padding: 0 8px 8px; } .riwayat-judul { padding: 8px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--teks-samar); } .obrolan { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 8px 8px 10px; border-radius: 8px; font-size: 14px; text-align: left; color: var(--teks-lembut); transition: background .12s; } .obrolan:hover { background: rgba(0,0,0,.045); color: var(--teks); } .obrolan.aktif { background: var(--permukaan); color: var(--teks); font-weight: 500; box-shadow: var(--shadow); } .obrolan .nama { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obrolan .hapus { opacity: 0; padding: 2px; border-radius: 5px; color: var(--teks-samar); } .obrolan:hover .hapus, .obrolan.aktif .hapus { opacity: 1; } .obrolan .hapus:hover { color: var(--merah); background: var(--merah-samar); } .sidebar-bawah { border-top: 1px solid var(--garis); padding: 10px 12px; font-size: 12px; color: var(--teks-samar); } .penyedia-baris { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .titik { width: 7px; height: 7px; border-radius: 50%; background: var(--teks-samar); } .titik.on { background: var(--hijau); } .titik.off { background: #c2820a; } /* ---------- panggung ---------- */ .panggung { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; } .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--garis-lembut); background: var(--bg); } .lencana-gratis { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--hijau); border: 1px solid var(--hijau); border-radius: 999px; padding: 2px 8px; } .pilih-rute { appearance: none; border: 1px solid var(--garis); background: var(--permukaan); border-radius: 9px; padding: 6px 30px 6px 11px; font-size: 14px; font-weight: 500; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; } .sisa-kuota { margin-left: auto; font-size: 12px; color: var(--teks-samar); } .gulung { flex: 1; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain; } .utas { max-width: var(--lebar-isi); margin: 0 auto; padding: 28px 20px 140px; display: flex; flex-direction: column; gap: 26px; } /* ---------- pesan ---------- */ .pesan { display: flex; flex-direction: column; gap: 7px; animation: masuk .22s ease-out; } @keyframes masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pesan { animation: none; } .gulung { scroll-behavior: auto; } } .pesan.aku { align-items: flex-end; } .pesan.aku .isi { background: var(--merah); color: #fff; padding: 11px 16px; border-radius: 18px 18px 5px 18px; max-width: 84%; } .pesan.dia .isi { max-width: 100%; } .isi { overflow-wrap: anywhere; } /* markdown */ .isi > *:first-child { margin-top: 0; } .isi > *:last-child { margin-bottom: 0; } .isi p { margin: 0 0 12px; } .isi h2 { font-size: 20px; margin: 22px 0 10px; letter-spacing: -.02em; } .isi h3 { font-size: 17px; margin: 20px 0 8px; } .isi h4, .isi h5 { font-size: 15px; margin: 16px 0 6px; } .isi ul, .isi ol { margin: 0 0 12px; padding-left: 24px; } .isi li { margin: 4px 0; } .isi li::marker { color: var(--teks-samar); } .isi blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--garis); color: var(--teks-lembut); } .isi .tabel-bungkus { margin: 0 0 14px; overflow-x: auto; border: 1px solid var(--garis); border-radius: 10px; } .isi table { border-collapse: collapse; width: 100%; font-size: 14px; } .isi th, .isi td { padding: 8px 12px; border-bottom: 1px solid var(--garis-lembut); } .isi thead th { background: var(--kode-bg); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; white-space: nowrap; } .isi tbody tr:last-child td { border-bottom: 0; } .isi hr { border: 0; border-top: 1px solid var(--garis); margin: 18px 0; } .isi a { color: var(--merah); text-underline-offset: 2px; } .isi code { font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--kode-bg); padding: 1.5px 5px; border-radius: 5px; } .isi .kode { margin: 0 0 14px; border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; background: var(--kode-bg); } .isi .kode-atas { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--garis); font: 11px/1 ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--teks-samar); } .isi .salin-kode { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--teks-lembut); padding: 3px 7px; border-radius: 6px; } .isi .salin-kode:hover { background: rgba(0,0,0,.06); color: var(--teks); } .isi .kode pre { margin: 0; padding: 12px; overflow-x: auto; } .isi .kode code { background: none; padding: 0; font-size: 13px; } /* caret streaming */ .isi.ngetik > *:last-child::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 2px; background: var(--merah); vertical-align: -2px; animation: kedip 1.05s steps(2) infinite; } @keyframes kedip { 50% { opacity: 0; } } /* baris alat di bawah jawaban */ .alat { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .15s; } .pesan:hover .alat, .alat:focus-within { opacity: 1; } .alat button { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; font-size: 12px; color: var(--teks-samar); } .alat button:hover { background: rgba(0,0,0,.05); color: var(--teks); } .nunggu { position: relative; } .nunggu::after { content: "…"; display: inline-block; width: 1.1em; text-align: left; animation: titik3 1.2s steps(4, end) infinite; clip-path: inset(0 100% 0 0); } @keyframes titik3 { to { clip-path: inset(0 0 0 0); } } .jejak { font-size: 11.5px; color: var(--teks-samar); display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .pil { border: 1px solid var(--garis); border-radius: 999px; padding: 1px 8px; } .pil.gratis { color: var(--hijau); border-color: var(--hijau); } .catatan-kuota { border: 1px solid var(--garis); background: var(--permukaan); color: var(--teks-lembut); padding: 12px 15px; border-radius: var(--radius); font-size: 14px; } .galat { background: var(--merah-samar); border: 1px solid var(--merah); color: var(--merah-tua); padding: 12px 15px; border-radius: var(--radius); font-size: 14px; } /* ---------- layar kosong ---------- */ .kosong { text-align: center; padding: 8vh 0 0; } .kosong h1 { font-size: 34px; letter-spacing: -.035em; margin: 0 0 8px; } .kosong p { color: var(--teks-lembut); margin: 0; } .saran { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 30px; text-align: left; } .saran button { border: 1px solid var(--garis); border-radius: 12px; padding: 13px 15px; background: var(--permukaan); text-align: left; /* tombol default rata tengah, timpa */ transition: border-color .14s, transform .06s; } .saran button:hover { border-color: var(--merah); transform: translateY(-1px); } .saran b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; } .saran span { font-size: 13px; color: var(--teks-samar); } /* ---------- komposer ---------- */ .komposer-bungkus { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent, var(--bg) 28%); padding: 22px 20px 14px; pointer-events: none; } .komposer { max-width: var(--lebar-isi); margin: 0 auto; pointer-events: auto; } .kotak { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 24px; box-shadow: var(--shadow); transition: border-color .14s; } .kotak:focus-within { border-color: var(--merah); } .kotak textarea { flex: 1; border: 0; background: none; resize: none; outline: none; padding: 8px 0; max-height: 200px; line-height: 1.55; } .kirim { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--merah); color: #fff; flex-shrink: 0; transition: opacity .14s, transform .06s; } .kirim:disabled { opacity: .35; cursor: not-allowed; } .kirim:not(:disabled):active { transform: scale(.94); } .kirim.stop { background: var(--teks); color: var(--bg); } /* ikon stop harus kontras di dua tema */ .bawah-catatan { text-align: center; font-size: 11.5px; color: var(--teks-samar); margin: 8px 0 0; } .turun { position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--permukaan); border: 1px solid var(--garis); box-shadow: var(--shadow); color: var(--teks-lembut); pointer-events: auto; } .turun[hidden] { display: none; } /* ---------- mobile ---------- */ .tirai { display: none; } @media (max-width: 860px) { /* di layar kecil sidebar itu laci: tombol topbar selalu ada, transisi lebar dimatikan */ .topbar .tombol-panel { width: 32px; opacity: 1; pointer-events: auto; margin-right: 0; transition: none; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; box-shadow: var(--shadow); } body:not(.sidebar-buka) .sidebar { margin-left: calc(-1 * var(--sidebar-w)); } body.sidebar-buka .tirai { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.35); } .utas { padding: 20px 16px 132px; } .kosong h1 { font-size: 27px; } .saran { grid-template-columns: 1fr; } .komposer-bungkus { padding: 18px 12px 10px; } } .hanya-mobile { display: none; } @media (max-width: 860px) { .hanya-mobile { display: grid; } .hanya-desktop { display: none; } }