/* Riwayat bersama dari dashboard dan profil, menggunakan dialog native. */
.nx-history-trigger { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(0,255,163,.25); border-radius: 50%; background: rgba(0,255,163,.07); color: var(--nx-emerald); cursor: pointer; }
.nx-history-trigger .material-symbols-outlined { font-size: 21px; }
.nx-history-trigger:hover { background: rgba(0,255,163,.15); }
body.nx-history-open { overflow: hidden; }
.nx-history-dialog { box-sizing: border-box; width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 22px; overflow-y: auto; border: 1px solid rgba(185,202,203,.18); border-radius: 20px; background: var(--nx-surface-low); color: var(--nx-on-surface); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.nx-history-dialog::backdrop { background: rgba(5,9,16,.78); backdrop-filter: blur(6px); }
.nx-history-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nx-history-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nx-history-title > .material-symbols-outlined { color: var(--nx-emerald); font-size: 23px; flex-shrink: 0; }
.nx-history-title h2 { margin: 0; color: #e0fdff; font: 600 19px/26px 'Space Grotesk', sans-serif; }
.nx-history-close { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(185,202,203,.12); border-radius: 10px; background: rgba(38,42,52,.6); color: var(--nx-on-surface-variant); cursor: pointer; }
.nx-history-close .material-symbols-outlined { font-size: 19px; }
.nx-history-caption { margin: 8px 0 0; color: var(--nx-on-surface-variant); font-size: 12px; line-height: 19px; }
.nx-history-empty { margin: 22px 0; padding: 28px 14px; border: 1px solid rgba(185,202,203,.08); border-radius: 12px; background: rgba(10,14,23,.35); text-align: center; }
.nx-history-empty-icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px; border: 1px solid rgba(0,242,254,.15); border-radius: 18px; background: rgba(0,242,254,.05); color: var(--nx-cyan); font-size: 28px; }
.nx-history-empty h3 { margin: 0; color: #e0fdff; font: 600 16px/24px 'Space Grotesk', sans-serif; }
.nx-history-empty p { margin: 8px 0 0; color: var(--nx-on-surface-variant); font-size: 12px; line-height: 20px; }
.nx-history-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 12px; border: 1px solid rgba(0,242,254,.35); border-radius: 10px; background: rgba(0,242,254,.1); color: var(--nx-cyan); font: 600 13px/20px 'Space Grotesk', sans-serif; cursor: pointer; }
.nx-history-action .material-symbols-outlined { font-size: 18px; }
@media (max-width: 360px) {
  .nx-history-dialog { padding: 16px; }
  .nx-history-title { gap: 6px; }
  .nx-history-title h2 { font-size: 16px; line-height: 23px; }
}