/* Root container appended to parent DOM */
.stusp-root {
  position: fixed;
  z-index: 2147483000; /* super high to always be on top */
  left: 0;
  width: 280px;
  bottom: 16px; /* overridden via inline style */
  pointer-events: none; /* allow only panel to receive events */
}

/* ketika attach_mode="inside" kita pakai kelas ini */
.stusp-root-inside {
  position: sticky;
  bottom: 0;
  z-index: 1;           /* cukup di atas konten dalam sidebar */
  pointer-events: auto; /* karena di dalam sidebar */
  width: 100%;
}

.stusp-panel {
  pointer-events: auto; /* clickable */
  border: 1px solid var(--stusp-border, #e5e7eb);
  border-radius: var(--stusp-radius, 12px);
  background: var(--stusp-bg, #fff);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  max-height: 70vh;
}

/* Collapsed header */
.stusp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
.stusp-header:hover { background: rgba(0,0,0,0.04); }

.stusp-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color:#fff; font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}

.stusp-text { flex: 1; min-width: 0; }
.stusp-name { font-weight: 600; font-size: 14px; color: var(--stusp-fg, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stusp-title { font-size: 12px; color: var(--stusp-dim,#6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stusp-arrow { color: #9ca3af; font-size: 12px; margin-left: 4px; transform: rotate(180deg); transition: transform .2s; }
.stusp-arrow.collapsed { transform: rotate(0deg); }

/* Expanded content */
.stusp-expanded { padding: 16px; }
.stusp-user {
  display: grid; grid-template-columns: 60px 1fr; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--stusp-divider,#f0f0f0);
}
.stusp-avatar-lg {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; color:#fff; font-weight: 800; font-size: 24px;
}
.stusp-details h3 { margin: 0 0 4px 0; font-size: 18px; color: var(--stusp-fg,#111827); }
.stusp-details p  { margin: 0; font-size: 13px; color: var(--stusp-dim,#6b7280); }

.stusp-stat {
  background: var(--stusp-card,#f8f9fa);
  border-radius: 8px; padding: 10px; margin-top: 12px;
}
.stusp-stat-label { font-size: 12px; color: var(--stusp-dim,#6b7280); margin-bottom: 6px; font-weight: 500; }
.stusp-stat-value { font-size: 15px; font-weight: 600; color: var(--stusp-fg,#111827); margin-bottom: 8px; }
.stusp-progress {
  height: 6px; width: 100%; background: #e5e7eb; border-radius: 3px; overflow: hidden;
}
.stusp-progress > div { height: 100%; width: 0%; transition: width .3s; }

.stusp-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--stusp-divider,#f0f0f0);
}
.stusp-btn {
  border: 0; border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.stusp-btn.profile { background: #f3f4f6; color: #374151; }
.stusp-btn.profile:hover { background: #e5e7eb; }
.stusp-btn.logout  { background: #ef4444; color: #fff; }
.stusp-btn.logout:hover { background: #dc2626; }

/* Dense mode (compact) */
.stusp-dense .stusp-expanded { padding: 12px; }
.stusp-dense .stusp-user { grid-template-columns: 50px 1fr; gap: 10px; }
.stusp-dense .stusp-avatar-lg { width: 50px; height: 50px; font-size: 20px; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .stusp-panel { --stusp-bg:#1f2937; --stusp-border:#374151; }
  .stusp-name, .stusp-details h3 { --stusp-fg:#f9fafb; }
  .stusp-title, .stusp-details p, .stusp-stat-label { --stusp-dim:#d1d5db; }
  .stusp-card { background:#374151; }
  .stusp-stat-value { --stusp-fg:#f9fafb; }
  .stusp-btn.profile { background:#374151; color:#d1d5db; }
  .stusp-btn.profile:hover { background:#4b5563; }
}
