/* NEST Dev v3.6 — portal aduan, kategori blog, artikel di halaman produk */

/* status (juga dipakai di halaman publik Area Pelanggan) */
.status{display:inline-block;padding:.2em .65em;border-radius:99px;font-size:.74rem;font-weight:600;white-space:nowrap}
.status-baru{background:var(--accent-solid);color:#fff}
.status-diproses{background:#1d4ed8;color:#fff}
.status-tunggu{background:#b45309;color:#fff}
.status-selesai{background:var(--brand-solid);color:#fff}
.status-batal{background:var(--surface-2);color:var(--muted)}

/* Area Pelanggan: tab */
.cust-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 18px}
.cust-tabs a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;font-size:.94rem}
.cust-tabs a:hover{color:var(--ink)}
.cust-tabs a.active{color:var(--ink);border-bottom-color:var(--brand)}
.cust-tabs svg{width:17px;height:17px}
.cust-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#b45309;color:#fff;font-size:.72rem}

/* Bantuan */
.sup-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:28px;align-items:start}
.sup-layout .cust-h:first-child{margin-top:4px}
.sup-item{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;color:var(--ink);transition:border-color .15s}
.sup-item:hover{border-color:var(--brand)}
.sup-item-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.sup-form .field{margin-bottom:14px}
.sup-form select,.sup-form input,.sup-form textarea{width:100%}
.sup-suggest{margin:-4px 0 14px;padding:10px 12px;border-radius:12px;background:var(--sky-soft)}
.sup-suggest p{margin:0 0 6px}
.sup-suggest .doc-hit{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--surface);margin-top:6px;color:var(--ink)}
.sup-previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:.85rem;color:var(--muted)}
.sup-previews figure{margin:0;width:96px}
.sup-previews img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.sup-previews figcaption{font-size:.74rem;text-align:center}
.sup-title{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.sup-thread-wrap{max-width:860px}
.sup-thread{display:flex;flex-direction:column;gap:12px}
.sup-msg{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);max-width:88%}
.sup-msg.me{align-self:flex-end;background:var(--brand-soft);border-color:transparent}
.sup-msg.note{background:#fff7e6;border-style:dashed;border-color:#f0b35a}
:root[data-theme="dark"] .sup-msg.note{background:#2b2214}
.sup-msg.sup-sys{align-self:center;max-width:100%;background:var(--surface-2);font-size:.9rem}
.sup-msg-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sup-msg-body{line-height:1.6;overflow-wrap:anywhere}
.sup-att{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sup-att img{width:140px;height:100px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.sup-admin{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.sup-admin aside .panel+.panel{margin-top:20px}
.sup-reply-opts{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin:4px 0 14px}
.sup-reply-opts select{width:auto;margin-left:6px}
.sup-status{display:grid;gap:8px}
.sup-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:14px;align-items:end}
@media (max-width:1100px){.sup-admin,.sup-settings{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.sup-layout{grid-template-columns:minmax(0,1fr)}.sup-msg{max-width:100%}}
.sup-thread .sup-msg{display:block}
.chip.active .muted{color:inherit;opacity:.75}
.sup-settings{align-items:start}
.sup-settings>div:last-child{padding-top:27px}
@media (max-width:1100px){.sup-settings>div:last-child{padding-top:0}}